jquery实现导航栏 end()串联作用
end(); 作用
回到最近的一个改变所匹配的jQuery元素的操作之前。即，将匹配的元素列表变为前一次的状态。 (个人理解为并列关系)
可以把 $(this).addClass("light").children("a").show().end().siblings().removeClass("light").children("a").hide();当成两部分看
$(this).addClass("light").children("a").show()
$(this).siblings().removeClass("light").children("a").hide();
$end() 保存上一次query操作并使用上一个jquery对象执行后面的操作
下面列表为一个导航栏操作
<html>
<head>
<script type="text/javascript" src="./jquery1.9.1.js"></script>
<style type="text/css">
#menu {width:300px;}
div a {float:left; width:300px;display:none;}
.light {background-color:#F00;}
</style>
</head>
<body>
<div id="menu">
<div class="class_children">
<span>第一章</span>
<a>1.0</a>
<a>1.1</a>
<a>1.2</a>
</div>
<div class="class_children">
<span>第二章</span>
<a>2.0</a>
<a>2.1</a>
<a>2.2</a>
</div>
<div class="class_children">
<span>第三章</span>
<a>3.0</a>
<a>3.1</a>
<a>3.2</a>
</div>
</div>
<script type="text/javascript">
$(".class_children").click(function(e) {
$(this).addClass("light").children("a").show().end().siblings().removeClass("light").children("a").hide();
});
</script>
</body>
</html>
浙公网安备 33010602011771号