首页 > 代码库 > jQery的链式操作和商城简易导航栏
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的链式操作和商城简易导航栏