HTML表格中套两个下拉列表

rose_live 2018-02-08 06:10:19
HTML表格中套两个下拉列表，点击一个另外一个也跟着动了。理想的情况是点左边，有的列表不动。以下是我的代码。
<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

    <script type="text/javascript">

var itemHeight = 40;

var dividerHeight = 1;



function openMenu(obj) {

    menuTitleId = obj.id;

    menuId = "menu" + menuTitleId.substring(10);

    indicatorId = "indicator" + menuTitleId.substring(10);



    menu = document.getElementById(menuId);

    indicator = document.getElementById(indicatorId);

    height = menu.style.height;



    if (height == "0px" || height == "") {

        childAmount = menu.getElementsByTagName('div').length;

        dividerAmount = menu.getElementsByTagName('li').length;

        height = childAmount * itemHeight + dividerAmount * dividerHeight;

        menu.style.height = height + "px";

        indicator.style.transform = "rotate(180deg)";

    } else {

        menu.style.height = "0px";

        indicator.style.transform = "rotate(0deg)";

    }

}

</script>

<style>



.menus { 

 width: 320px; 

 overflow: hidden; 

 box-shadow: 1px 1px 4px gray; 

 /* border-bottom: 1px solid black; 

 border-top: 1px solid black; */ 

 border: 1px solid gray; 

 border-radius: 5px; 

 }



.menus_tit {

	width: 647px;

	overflow: hidden;

	box-shadow: 1px 1px 4px gray;

	/* border-bottom: 1px solid black; 

 	border-top: 1px solid black; */ 

	border: 1px solid gray;

	border-radius: 5px;

	background-position: center center;

	text-align: center;

	vertical-align: middle;

 }



.menu { 

 overflow: hidden; 

 height: 0px; 

 transition: all 0.3s ease; 

 }



.menu_title { 

 width: 305px; 

 height: 50px; 

 line-height: 50px; 

 background: #fafafa; 

 color: gray; 

 font-size: 20px; 

 padding-left: 15px; 

 transition: all 0.3s ease; 

 cursor: pointer; 

 position: relative; 

 font-weight: bold; 

 overflow: hidden; 

 }



.menu_tit {

	width: 670px;

	height: 50px;

	line-height: 50px;

	background: #fafafa;

	color: gray;

	font-size: 20px;

	transition: all 0.3s ease;

	cursor: pointer;



	font-weight: bold;

	overflow: hidden;

 }

 

.menu_title:hover { 

 background: #dedede; 

 color: black; 

 } 

 

.menu_tit:hover { 

 background: #dedede; 

 color: black; 

 }



.indicator { 

 width: 50px; 

 height: 50px; 

 font-weight: bold; 

 position: absolute; 

 right: 0px; 

 top: 0px; 

 transition: all 0.3s ease; 

 font-weight: bold; 

 text-align: center; 

 }



.item { 

 width: 290px; 

 height: 40px; 

 line-height: 40px; 

 background: gray; 

 color: white; 

 padding-left: 30px; 

 transition: all 0.3s ease; 

 cursor: pointer; 

 overflow: hidden; 

 }



.item:hover { 

 background: #B22222; 

 }



.item a { 

 width: 290px; 

 height: 40px; 

 display: block; 

 text-decoration: none; 

 color: white; 

 text-decoration: none; 

 }



.item_divider { 

 width: 322px; 

 height: 1px; 

 background: white; 

 display: block; 

 opacity: 0.8; 

 }



.menu_divider { 

 width: 100%; 

 height: 1px; 

 background: gray; 

 }

</style>

</head>

<body>

<table width="640" align="center" >

<tr><td width="640" height="55" colspan="2" align="center" valign="baseline"></td></tr><tr><td colspan="2" > 

<div align="center" class="menus_tit">

	<div align="center" class="menu_tit">

        这是标题  </div></div></td></tr></table>

<table align="center">

 	<tr>

		<td>

        	<table>

      			<tr>

        			<td valign="top">

<div class="menus">

    <li class="menu_divider"></li>



    <div class="menu_title">

        表1  </div>



    <li class="menu_divider"></li>



    <div id="menu_title1" class="menu_title" onclick="openMenu(this)">

        选项 1  </div>

    <div class="menu" id="menu1">

        <div class="item">

            <a href="#">Item1</a>

        </div>

        <li class="item_divider"></li>

        <div class="item">

            <a href="#">Item2</a>

        </div>

        <li class="item_divider"></li>

        <div class="item">

            <a href="#">Item3</a>

        </div>

        <li class="item_divider"></li>

        <div class="item">

            <a href="#">Item4</a>

        </div>

    </div>



    <li class="menu_divider"></li>



    <div id="menu_title2" class="menu_title" onclick="openMenu(this)">

        选项 2  </div>

    <div class="menu" id="menu2">

        <div class="item">

            <a href="#">Item1</a>

        </div>

        <li class="item_divider"></li>

        <div class="item">

            <a href="#">Item2</a>

        </div>

    </div>



    <li class="menu_divider"></li>



    <div id="menu_title3" class="menu_title" onclick="openMenu(this)">

        选项 3  </div>

	<div class="menu" id="menu3">

        <div class="item">

            <a href="#">Item1</a>

        </div>

        <li class="item_divider"></li>

    	<div class="item">

            <a href="#">Item2</a>

    	</div>

    </div>

    

    <li class="menu_divider"></li>



    <div id="menu_title4" class="menu_title" onclick="openMenu(this)">

        选项 4  </div>

    <div class="menu" id="menu4">

        <div class="item">

            <a href="#">Item1</a>

        </div>

        <li class="item_divider"></li>

        <div class="item">

            <a href="#">Item2</a>

        </div>

        <li class="item_divider"></li>

        <div class="item">

            <a href="#">Item3</a>

        </div>

    </div>  

</div>

					</td>

				</tr>

			</table>

		</td>

		<td>

        	<table>

     			<tr>

                	<td valign="top">

<div class="menus">

    <li class="menu_divider"></li>



    <div class="menu_title">

        表2  </div>



    <li class="menu_divider"></li>



    <div id="menu_title11" class="menu_title" onclick="openMenu(this)">

        选项 1  </div>

    <div class="menu" id="menu11">

        <div class="item">

            <a href="#">Item1</a>

        </div>

        <li class="item_divider"></li>

        <div class="item">

            <a href="#">Item2</a>

        </div>

        <li class="item_divider"></li>

        <div class="item">

            <a href="#">Item3</a>

        </div>

        <li class="item_divider"></li>

        <div class="item">

            <a href="#">Item4</a>

        </div>

    </div>



    <li class="menu_divider"></li>



    <div id="menu_title12" class="menu_title" onclick="openMenu(this)">

        选项 2  </div>

    <div class="menu" id="menu12">

        <div class="item">

            <a href="#">Item1</a>

        </div>

        <li class="item_divider"></li>

        <div class="item">

            <a href="#">Item2</a>

        </div>

    </div>



    <li class="menu_divider"></li>



    <div id="menu_title13" class="menu_title" onclick="openMenu(this)">

        选项 3  </div>

  	<div class="menu" id="menu13">

        <div class="item">

            <a href="#">Item1</a>

        </div>

        <li class="item_divider"></li>

    <div class="item">

            <a href="#">Item2</a>

    </div>

    </div>

    

    <li class="menu_divider"></li>



    <div id="menu_title14" class="menu_title" onclick="openMenu(this)">

        选项 4  </div>

    <div class="menu" id="menu14">

        <div class="item">

            <a href="#">Item1</a>

        </div>

        <li class="item_divider"></li>

        <div class="item">

            <a href="#">Item2</a>

        </div>

        <li class="item_divider"></li>

        <div class="item">

            <a href="#">Item3</a>

        </div>

    </div>  

</div>

					</td>

				</tr>

			</table>

		</td>

	</tr>

</table>

</body>

</html>
...全文
1618 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
程序员一鸣 2018-02-24
  • 打赏
  • 举报
 回复
难道你都没有发现，你的表一和表二的div的id是一样的吗
hfhan_872914334 2018-02-09
  • 打赏
  • 举报
 回复
什么年代了还有table布局！！！！在你的table上加个css属性： vertical-align: top;
JavaScript网页特效范例宝典源码
实例063 在下拉列表中进行多选移除 106 实例064 将数组中的数据添加到下拉菜单中 107 实例065 应用下拉菜单选择所要联机的网站 108 实例066 多级级联菜单 110 实例067 可以输入文字的下拉菜单 111 实例068 根据下拉...
html如何设置下拉列表
介绍在htlm中下拉列表的实现，html中下拉列表由select和option这两个表单标签一起使用来完成下拉功能的。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...
WPS表格Excel全套课程（WPS表格特色功能、函数、透视表、图表）

html 中的下拉列表,【HTML】什么是 HTML 中的下拉列表（select、option）
接下来我们就来学习一下HTML中的下拉列表文章目录一：什么是HTML中的下拉列表1：select标签属性2：option标签属性一：什么是HTML中的下拉列表在HTML中，下拉列表是由select和option这两个表单标签一起使用来表示的。...
layui 数据表格下拉框_layui学习——数据表格嵌套下拉列表，并实现动态更新
layui学习——数据表格嵌套下拉列表，并实现动态更新项目中有些字段的数据为固定的几个值，这些字段在数据表格中显示为...步骤1：创建数据表格嵌套下拉列表样式使用layui的template功能，先创建一个下拉列表：scrip...
CSS

61,111

社区成员

60,734

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章