示例HTML:
<div class=blah>
<div class=moreCats></div>
</div>
<div class=subCats>.......</div>
<div class=blah>
<div class=moreCats></div>
</div>
<div class=subCats>.......</div>
<div class=blah>
<div class=moreCats></div>
</div>
<div class=subCats>.......</div>
使用slideToggle
,如果我点击第一个div moreCats
,我想要下一个subCats到slideDown
,它会这样做。同时我想slideUp
任何其他开放subCats
,但是,不是我翻转的那个,否则它会关闭然后重新打开,这就是它的作用。
问题:这有效吗?如果不是有类似的东西?
$('div.subCats').not($(this).next('.subCats')).slideUp();
这是我正在尝试的完整JQuery
// show children cat items
$('#sideNav').on("click", ".moreCats", function() {
$('div.subCats').not($(this).next('.subCats')).slideUp(); // close all except next
$(this).next('.subCats').slideToggle(); // slideToggle next
});
答案 0 :(得分:1)
您可以通过在.not
内放置当前目标的slideToggle(将返回该元素)来组合它们,并且您也想要选择父级的下一个
$('#sideNav').on("click", ".moreCats", function() {
$('div.subCats').not($(this).parent().next('.subCats').slideToggle()).slideUp();
//or do $(this).closest('.blah').next('.subCats');
});
<强> Demo 强>
如果你想拆分它们,那么最好先缓存下一个,而不是再次选择它。
$('#sideNav').on("click", ".moreCats", function() {
var $target = $(this).parent().next('.subCats');
$('div.subCats').not($target.slideToggle()).slideUp();
//or just do as below
//$('div.subCats').not($target).slideUp();
//$target.slideToggle()
});
答案 1 :(得分:1)
你所拥有的是有效的,但它没有达到预期的效果,.next()
选择下一个直接兄弟元素,你应该首先选择父元素:
$('div.subCats').not($(this.parentNode).next('.subCats')).slideUp();
您还可以使用.index()
方法:
$('#sideNav').on({
click: function() {
var $sub = $('div.subCats'),
i = $('#sideNav .moreCats').index(this);
$sub.not( $sub.eq(i).slideToggle() ).slideUp();
}
}, ".moreCats");
答案 2 :(得分:1)
.moreCats
没有任何兄弟姐妹,因此您无法使用.next()
。你真正需要的是获得this
父母的下一个兄弟。所以你从$(this)
&gt;开始.parent()
&gt; .next('.subCats')
$('body').on("click", ".moreCats", function() {
console.log($(this).parent().next('.subCats'));
$('div.subCats').not($(this).parent().next('.subCats')).slideUp(); // close all except next
$(this).parent().next('.subCats').slideToggle(); // slideToggle next
});
有关示例,请参阅此JSFiddle。