您的位置：首页 > Web前端 > JavaScript

JavaScript中list的简单使用<菜单>

2015-10-13 22:45 726 查看

很简单的一个使用：点击菜单，能够显示下面的或者不显示

1，主要目的：：展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容
用到的是 overflow：hidden 和 overflow="visible"这两个属性在点击的function中，设置属性应该
node.style.overflow="visible";当然设置tr的高度也是很重要的，要恰好让其他的选项隐蔽
2，采用同样的技术，多加几个，但是就是传参数比较麻烦，采用this传参很常用

<!DOCTYPE html>
<html>
<head>

<title>list.html</title>


<style type="text/css">
dl{
height:18px;/*优先级问题，必须要写*/
overflow:hidden;
}
dd{
margin:0px;
padding:0px;
}
.close{
height:18px;/*优先级问题，必须要写*/
overflow:hidden;
}
.open{
height:80px;
overflow:visible;
background-color:#ff8000;
}

</style>
<script type="text/javascript">

function click2(node1){
// alert("aa"+node.nodeName);// td
var nodes=node1.parentNode;
// alert(nodes.nodeName);
// alert("aa"+nodes.className);
//※※通过传进的对象判断采用哪种css模式
if(nodes.className=="open"){
nodes.className="close";
}else{
nodes.className="open";
}
}
</script>

</head>
<body>



<br/>
<br/>
<hr/>


<dl>
<dt onclick="click2(this)">1菜单条1</dt>
<dd>菜单1</dd>
<dd>菜单2</dd>
<dd>菜单3</dd>
<dd>菜单4</dd>
</dl>
<dl>
<dt onclick="click2(this)">2菜单条2</dt>
<dd>菜单11</dd>
<dd>菜单22</dd>
<dd>菜单33</dd>
<dd>菜单44</dd>
</dl>
<dl>
<dt onclick="click2(this)">3菜单条3</dt>
<dd>菜单12</dd>
<dd>菜单23</dd>
<dd>菜单34</dd>
<dd>菜单45</dd>
</dl>
</body>
</html>
点击前：

点击后：颜色设置是css设置的

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML JavaScript

相关文章推荐

新的分享

章节导航