Jquery实现树桩导航
程序员文章站
2022-06-22 12:53:57
Jquery实现树桩导航 展示一下效果? 当我鼠标点击的是时候展开下级菜单例如:我点击汽车 就会显示奥迪与奔驰再次点击就会闭合 实现思路 1. 实现Ul的搭建,并建立样式实现隐藏相对应的样式 2 找到要操作的的对象并添加函数 3找到要操作的对象添加对应的功能 方法的讲解 children()指的是子 ......
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+Ajax+Json+存储过程实现高效分页
-
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
-
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
-
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
-
jQuery插件实现非常实用的tab栏切换功能【案例】
-
jquery实现静态搜索功能(可输入搜索文字)
-
jquery实现tab键进行选择后enter键触发click行为
-
js代码实现微博导航栏
-
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
-
jQuery实现 上升、下降、删除、添加一行代码