ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptドロップダウンリストにツリーメニューを表示する実装方法_javascriptスキル
JavaScriptドロップダウンリストにツリーメニューを表示する実装方法_javascriptスキル
- WBOYオリジナル
- 2016-05-16 15:31:461415ブラウズ
使い方は非常に簡単です。メニューをクリックして以下を表示するかどうかを選択します。
1. 主な目的: はメニュー項目を表示し、それをクリックして非表示にし、もう一度クリックすると、次のコンテンツがポップアップします
クリックされた関数では、オーバーフローの 2 つの属性 (hidden と overflow="visible") が使用され、設定属性は
である必要があります。node.style.overflow="visible"; もちろん、他のオプションを非表示にできるように、tr の高さを設定することも非常に重要です。
2. 同じテクノロジー を使用してさらにいくつか追加しますが、パラメータを渡すのに を使用するのが一般的です
<!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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。