我正在尝试做的是复制一个手风琴式jQuery小部件
我有以下代码:
$('a').on('click', function (e) {
var active = $(this).parent().next();
active.toggleClass('active');
active.siblings().not(active).removeClass('active');
e.preventDefault();
});
虽然是active.siblings()。not(active).removeClass('active'); 无法正常工作我基本上希望它选择所有同级UL标签以及同级的所有子级UL标签,但不包括“活动/当前”选择。
我已将此提琴设置为示例http://jsfiddle.net/7u3pw1hz/
问题是,其他ul
元素不是同级元素,它们是li
当前同级元素的子元素li
$('a').on('click', function(e) {
var active = $(this).parent().next();
active.toggleClass('active');
active.parent().siblings().children('ul').removeClass('active');
active.find('ul').removeClass('active');
e.preventDefault();
});
ul ul.active {
max-height: 800px;
}
ul ul {
max-height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><span><a href="category.html">Shop</a> <i class="icon-expand_more"></i></span>
<ul class="active">
<li>
<span><a href="category.html">Sleeping Bags</a> <i class="icon-expand_more"></i></span>
<ul class="menu">
<li><a href="category.html">Medium Sleeping Bags</a></li>
<li><a href="category.html">Winter Sleeping Bags</a></li>
<li><a href="category.html">Summer Sleeping Bags</a></li>
</ul>
</li>
<li>
<span><a href="category.html">Swaddles</a> <i class="icon-expand_more"></i></span>
<ul class="menu">
<li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
<li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
<li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
<li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
<li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
<li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
<li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
<li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
</ul>
</li>
<li>
<span><a href="category.html">Linen</a> <i class="icon-expand_more"></i></span>
<ul class="menu">
<li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
<li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
<li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
<li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
</ul>
</li>
<li>
<span><a href="category.html">Clothing</a> <i class="icon-expand_more"></i></span>
<ul class="menu">
<li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
<li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
<li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
<li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
</ul>
</li>
<li>
<span><a href="category.html">My Room</a> <i class="icon-expand_more"></i></span>
<ul class="menu">
<li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
<li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
<li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
<li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
</ul>
</li>
<li>
<span><a href="category.html">Tool Box</a> <i class="icon-expand_more"></i></span>
<ul class="menu">
<li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
<li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
<li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
<li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
</ul>
</li>
<li>
<span><a href="category.html">Wellbeing</a> <i class="icon-expand_more"></i></span>
<ul class="menu">
<li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
<li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
<li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
<li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
</ul>
</li>
<li>
<span><a href="category.html">Feed</a> <i class="icon-expand_more"></i></span>
<ul class="menu">
<li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
<li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
<li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
<li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
</ul>
</li>
<li>
<span><a href="category.html">Bath</a> <i class="icon-expand_more"></i></span>
<ul class="menu">
<li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
<li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
<li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
<li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
</ul>
</li>
<li>
<span><a href="category.html">Carriers</a> <i class="icon-expand_more"></i></span>
<ul class="menu">
<li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
<li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
<li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
<li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
</ul>
</li>
<li>
<span><a href="category.html">Gifts</a> <i class="icon-expand_more"></i></span>
<ul class="menu">
<li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
<li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
<li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
<li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
</ul>
</li>
</ul>
</li>
<li><span><a href="category.html">Brands</a></span></li>
</ul>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句