jquery链式调用 - 层级菜单示例
jquery链式调用 - 层级菜单示例
Devops海洋的渔夫
发布于 2019-06-02 13:26:34
发布于 2019-06-02 13:26:34
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素层级菜单
下面是最终的实现效果，如下：
那么下面来逐步编写，首先将静态页面先写出来，如下：
使用ul>(li>a{水果}+(ul>li{苹果}*3))*5按Tab键，就可以快速生成需要的HTML代码。
那么下面就是编写样式了。
使用jquery的链式写法，设置层级菜单的收缩
完整代码如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.4.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".menu a").click(function(){
// alert($(this).html());
// alert($(this).siblings().html());
// $(this).siblings().toggle(1,'swing');
// $(this).siblings().slideUp();
// $(this).siblings().slideDown().parent().siblings().children('ul').slideUp();
// $(this).siblings().addClass("active").slideDown().parent().siblings().children('ul').removeClass("active").slideUp();
$(this).siblings().addClass("active").stop().slideToggle().parent().siblings().children('ul').removeClass("active").slideUp();
})
})
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: 'Microsoft Yahei';
color: #fff;
}
.menu_warp{
width: 310px;
}
.menu_warp a{
display: block;
width: 100%;
height: 45px;
line-height: 45px;
text-indent: 14px;
background-color: rgb(51,102,201);
border-bottom: 1px solid #fff;
}
.menu li ul li {
height: 45px;
line-height: 45px;
text-indent: 28px;
background-color: rgb(122,161,239);
border-bottom: 1px solid #fff;
}
.menu ul{
display: none;
}
.menu .active{
display: block;
}
</style>
</head>
<body>
<!-- div.menu_warp>ul.menu>(li>a{水果}+(ul>li{苹果}*3))*5 -->
<div class="menu_warp">
<ul class="menu">
<li>
<a href="#">水果</a>
<ul class="active">
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
</li>
<li>
<a href="#">水果</a>
<ul>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
</li>
<li>
<a href="#">水果</a>
<ul>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
</li>
<li>
<a href="#">水果</a>
<ul>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
</li>
<li>
<a href="#">水果</a>
<ul>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
</li>
</ul>
</div>
</body>
</html>注意：在写这个代码的过程中，发现如果a标签的href = ""，这种情况下监听click方法是无法正常触发jquery的特效的，需要设置href=“#”，才可以正常使用jquery特效。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.04.11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录