很简单的一个使用：点击菜单，能够显示下面的或者不显示
1，主要目的：： 展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容用到的是 overflow：hidden 和 overflow="visible"这两个属性 在点击的function中，设置属性应该node.style.overflow="visible";当然设置tr的高度也是很重要的，要恰好让其他的选项隐蔽2，采用同样的技术，多加几个，但是就是传参数比较麻烦，采用this传参很常用
<!DOCTYPE html><html> <head><!– 1，主要目的：： 展现的是的一个菜单项，然后点击一下，隐藏，，点一下，弹出下面的内容用到的是 overflow：hidden 和 overflow="visible"这两个属性 在点击的function中，设置属性应该node.style.overflow="visible";2，采用同样的技术，多加几个，但是就是传参数比较麻烦–><title>list.html</title><!–<link rel="stylesheet" type="text/css" href="./styles.css">–><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);// tdvar 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> <!–层次列表–><!–当很多时候采用传参就很麻烦,每个都需要去传参 <dl><dt onclick="click1(0)">菜单条1</dt><dd>菜单1</dd><dd>菜单2</dd><dd>菜单3</dd><dd>菜单4</dd> </dl> <dl><dt onclick="click1(1)">菜单条2</dt><dd>菜单11</dd><dd>菜单22</dd><dd>菜单33</dd><dd>菜单44</dd> </dl> <dl><dt onclick="click1(2)">菜单条3</dt><dd>菜单12</dd><dd>菜单23</dd><dd>菜单34</dd><dd>菜单45</dd> </dl>–><br/><br/><hr/><!–<dl class="close">先手动采用css测试，可以然后采用编程使用–><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设置的
版权声明：本文为博主原创文章，未经博主允许不得转载。希望大家多指教指教
或许是某个未开发的荒凉小岛，或许是某座闻名遐迩的文化古城。
