Jquery實現樹樁導航
阿新 • • 發佈：2018-01-27
children prop 例如 javascrip alt 技術分享 ppr itl 元素
Jquery實現樹樁導航
展示一下效果？
當我鼠標點擊的是時候展開下級菜單例如：我點擊汽車 就會顯示奧迪與奔馳再次點擊就會閉合
實現思路
1. 實現Ul的搭建，並建立樣式實現隱藏相對應的樣式
2 找到要操作的的對象並添加函數
3找到要操作的對象添加對應的功能
方法的講解
children()指的是子元素 .stop（）是停止的意思 .slideToggle() 滑動開關
e．stopPropagation 停止冒泡
筆者在這裏寫了一個關於鼠標點擊的樹樁導航效果
Jquery樹樁導航
<title>Document</title>
<style>
ul li ul{
display:none;
list-style:none;
}
</style>
</head>
<body>
<ul>
<li>汽車
<ul>
<li>奧迪
<ul>
<li>奧迪4</li>
<li>奧迪6</li>
</ul>
</li>
<li>奔馳</li>
</ul>
</li>
<li>火車</li>
</ul>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script>
$("li").click(function(e){
$(this).children().stop().slideToggle();
e.stopPropagation();
});
</script>
</body>
</html>
Jquery實現樹樁導航