jQuery多级展开手风琴竖向菜单免费下载

2016-05-14 21:31 阅读 50 次 评论关闭

今天我们要为大家介绍一款非常实用的jQuery多级展开手风琴竖向菜单,与之前介绍的手风琴菜单不同的是,它虽然没有艳丽的外观,但是他支持多级展开,用起来非常方便,多层级的支持,也让这款手风琴菜单变得更加实用.

<script type="text/javascript">
$(document).ready(function() {
$('.inactive').click(function(){
if($(this).siblings('ul').css('display')=='none'){
$(this).parent('li').siblings('li').removeClass('inactives');
$(this).addClass('inactives');
$(this).siblings('ul').slideDown(100).children('li');
if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){
$(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
$(this).parents('li').siblings('li').children('ul').slideUp(100);

}
}else{
//控制自身变成+号
$(this).removeClass('inactives');
//控制自身菜单下子菜单隐藏
$(this).siblings('ul').slideUp(100);
//控制自身子菜单变成+号
$(this).siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives');
//控制自身菜单下子菜单隐藏
$(this).siblings('ul').children('li').children('ul').slideUp(100);

//控制同级菜单只保持一个是展开的(-号显示)
$(this).siblings('ul').children('li').children('a').removeClass('inactives');
}
})
});
</script>

jQuery多级展开手风琴竖向菜单部分代码解读:

siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。

语法

.siblings(selector)

参数 描述
selector 字符串值,包含用于匹配元素的选择器表达式。

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象,.siblings() 方法允许我们在 DOM 树中搜索这些元素的同胞元素,并用匹配元素构造一个新的 jQuery 对象。

该方法接受可选的选择器表达式,与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。

请思考这个带有基本的嵌套列表的页面:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
如果我们从第三个项目开始,则可找到该元素的同胞元素:

$('li.third-item').siblings().css('background-color', 'red');

此处调用的结果是将项目 1、2、4 和 5 的背景设置为红色。 设置为红色背景。由于我们未应用选择器表达式,所有同胞元素很自然地成为了对象的一部分。如果已应用选择器,则只会包含四个列表中的匹配的项目。
原始元素不包含在同胞元素中,当我们打算找到 DOM 树的特定层级上的所有元素时,记住一点很重要。

下载地址jQuery多级展开手风琴竖向菜单免费下载

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:jQuery多级展开手风琴竖向菜单免费下载 | 猎微网

评论已关闭!