next()、nextAll()和siblings方法的使用

next()、nextAll()和siblings方法的使用:

next():可获取指定元素紧邻的下一个兄弟元素;

nextAll():可获取指定元素后的所有兄弟元素;

siblings():则可获取指定元素的所有兄弟元素。

prev():取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

preAll():查找当前元素之前所有的同辈元素

parent():取得一个包含着所有匹配元素的唯一父元素的元素集合。

children:获取指定元素的子元素,同子元素选择器。

find():获取指定元素的后代元素,同后代选择器。

实例:折叠式菜单的实现

//slideup() 隐藏,slidedown() 显示

//主要代码
<script>
$(function () {
$(".menu_body").hide();
$(".menu_head").click(function () {
$(this).next().slideDown();
$(this).css("color","white");
$(this).parent().siblings().children(".menu_body").slideUp();
$(this).parent().siblings().children(".menu_head").css("color","#475052")
})
})
</script>
<ul class="menu_list">
<li>
<p class="menu_head">目标管理</p>
<div class="menu_body">
<a href="#">主题空间</a>
<a href="#">项目任务</a>
<a href="#">工作计划</a>
<a href="#">日程事件</a>
<a href="#">时间视图</a>
</div>
</li>
<li>
<p class="menu_head">会议管理</p>
<div class="menu_body">
<a href="#">主题空间</a>
<a href="#">会议安排</a>
<a href="#">待开会议</a>
<a href="#">已开会议</a>
<a href="#">会议资源</a>
</div>
</li>
<li>
<p class="menu_head">知识社区</p>
<div class="menu_body">
<a href="#">我的收藏</a>
<a href="#">知识广场</a>
<a href="#">文档中心</a>
<a href="#">我的博客</a>
<a href="#">文档库管理</a>
</div>
</li>
<li>
<p class="menu_head">我的工具</p>
<div class="menu_body">
<a href="#">综合查询</a>
<a href="#">通讯录</a>
<a href="#">便签</a>
<a href="#">计算器</a>
<a href="#">万年历</a>
<a href="#">常用链接</a>
</div>
</li>
</ul>

猜你喜欢

转载自www.cnblogs.com/ylw-sx/p/12462808.html