Question

示例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     
});

Answer 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()
});

Answer 2

你所拥有的是有效的，但它没有达到预期的效果，.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");

Answer 3

.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。

JQuery。不（下） - 有可能吗？

3 个答案: