javascript下拉清單中顯示樹狀選單的實作方法_javascript技巧
- WBOY原創
- 2016-05-16 15:31:461417瀏覽
很簡單的使用：點選選單，能夠顯示下面的或不顯示。
1、主要目的：展現的是的一個選單項，然後點擊一下，隱藏，點一下，彈出下面的內容
用到的是 overflow：hidden 和 overflow="visible"這兩個屬性 在點擊的function中，設定屬性應該
node.style.overflow="visible";當然設定tr的高度也是很重要的，要剛好讓其他的選項隱蔽
2、採用同樣的技術，多加幾個，但是就是傳參數比較麻煩，採用this傳參很常用
實現效果：
<!DOCTYPE html>
<html>
<head>
<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);// 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>
<!--层次列表-->
<!--当很多时候采用传参就很麻烦,每个都需要去传参
<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設定）
如何利用javascript製作下拉清單中顯示樹狀選單，相信大家透過這篇文章應該有了大概的思路，也相信大家製作的下拉清單中顯示樹狀選單效果比小編做的還精緻。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn