jQery的链式操作和商城简易导航栏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQery的链式操作和商城简易导航栏相关的知识，希望对你有一定的参考价值。
今天要记录的是jq的一些简单操作。项目的需求是做一个导航栏，单机不同的商品名称链接，显示相应的内容。用js来写的话相对代码量要多一些，选择jqrey一行则可以搞定，下面呢是我的代码和效果图
这个是初始化
点击后
首先是我们的布局部分，这里呢我直接把我的代码写进来，样式可能有点抽象
<style>
.level1{
list-style: none;
line-height: 30px;
width: 100px;
cursor: pointer;
border-top: none;
}
.level2{
list-style: none;
line-height: 20px;
display: none;
width: 100px;
}
.level2 li{
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level1">
<a>衬衫</a>
<ul class="level2">
<li><a>短袖衬衫</a></li>
<li><a>长袖衬衫</a></li>
<li><a>无袖T袖</a></li>
<li><a>长袖T袖</a></li>
</ul>
</li>
<li class="level1">
<a>卫衣</a>
<ul class="level2">
<li><a>开襟卫衣</a></li>
<li><a>套头卫衣</a></li>
<li><a>运动卫衣</a></li>
<li><a>童装卫衣</a></li>
</ul>
</li>
<li class="level1">
<a>裤子</a>
<ul class="level2">
<li><a>短裤</a></li>
<li><a>长裤裤</a></li>
<li><a>牛仔裤</a></li>
<li><a>休闲裤</a></li>
</ul>
</li>
</ul>
</div>
接下来进入我们的主体部分了
<script>
// jq的选择器是非常强大，不像js那样的 document.getElementsByClassName去选择我们要操作的元素，而是$(" "）去选择
$(".level1>a").click(function(){
$(this).addClass("current").next().show().parent().siblings(). children( "a ").removeClass("current").next().hide();
return flase
}) //这样我们的一个效果就出来了
这段代码的作用是：当我点击a元素的时候（它是level的子元素），给其添加一个class ：current，然后紧邻其后的其他元素显示出来，同时将他的父辈元素内部的子元素<a>
都去掉一个名为current 的class，并且将紧邻他们后面的其他元素都隐藏起来 这也就是jq的链式操作 一行代码就能搞定
虽然做到了行为和内容的分离，不过jq也应该保持良好的层次结构和规范性，于是我又将代码改了一下，方便阅读和维护
$(".level1>a").click(function(){
$(this).addClass("current")
. next().show().parent()
.siblings(). children( "a ")
.removeClass("current")
.next().hide();
return flase
})
</script>
这样我们的一个建议导航菜单就完成了，怎么样 jq很强大吧
以上是关于jQery的链式操作和商城简易导航栏的主要内容，如果未能解决你的问题，请参考以下文章
如何为导航到实现底部导航栏的活动中的上一个片段进行后推操作？
带有片段和底部导航栏的 Android FloatingActionButton
是否可以使用 AndroidX 导航将片段中的操作栏标题居中？
Android仿小米商城底部导航栏之二（BottomNavigationBarViewPager和Fragment的联动使用）