向下滑動每個列表

Question

我需要ul.list-group-sub應該一眼看不到任何東西，當我點擊「Click」（.dd）時，只有一個「list-group-sub」應顯示來自當前li的塊，而「list-group-子」應顯示從其他li反之亦然沒有，只有一個是一個‘清單基團的子’一次打開

小提琴演示： https://fiddle.jshell.net/alpeshlahad/zv3vpzew/3/

$(".list-group-item .dd").click(function() { 
 
    $("ul.list-group-sub").slideToggle(); 
 
});

ul.list-group-sub { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list-group member-list trainers-data ot-box"> 
 
    <li class="list-group-item"> 
 
    List 1 
 
    <span class="label"> 
 
     <a href="javascript:;" class="dd">Click</a> 
 
    </span> 
 
    <ul class="list-group-sub"> 
 
     <li class="list-group-item checked">Sublist 1</li> 
 
     <li class="list-group-item checked">Sublist 2</li> 
 
     <li class="list-group-item checked">Sublist 3</li> 
 
    </ul> 
 
    </li> 
 
    <li class="list-group-item"> 
 
    List 2 
 
    <span class="label"> 
 
     <a href="javascript:;" class="dd">Click</a> 
 
    </span> 
 
    <ul class="list-group-sub"> 
 
     <li class="list-group-item checked">Sublist 1</li> 
 
     <li class="list-group-item checked">Sublist 2</li> 
 
     <li class="list-group-item checked">Sublist 3</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

問題是因爲您的ul.list-group-sub選擇器在所有元素上調用slideToggle()。您需要遍歷DOM以查找與單擊的.dd元素相關的一個。要做到這一點，你可以使用closest()來獲得父母li，然後find()獲得你需要的元素。

只顯示一個在時刻你也需要調用它們的slideUp()同時切換目標一個菜單。試試這個：

$(".list-group-item .dd").click(function(e) { 
 
    e.preventDefault(); 
 
    var $target = $(this).closest('li').find("ul.list-group-sub").slideToggle(); 
 
    $('ul.list-group-sub').not($target).slideUp(); 
 
});

ul.list-group-sub { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list-group member-list trainers-data ot-box"> 
 
    <li class="list-group-item"> 
 
    List 1 
 
    <span class="label"> 
 
     <a href="#" class="dd">Click</a> 
 
    </span> 
 
    <ul class="list-group-sub"> 
 
     <li class="list-group-item checked">Sublist 1</li> 
 
     <li class="list-group-item checked">Sublist 2</li> 
 
     <li class="list-group-item checked">Sublist 3</li> 
 
    </ul> 
 
    </li> 
 
    <li class="list-group-item"> 
 
    List 2 
 
    <span class="label"> 
 
     <a href="#" class="dd">Click</a> 
 
    </span> 
 
    <ul class="list-group-sub"> 
 
     <li class="list-group-item checked">Sublist 1</li> 
 
     <li class="list-group-item checked">Sublist 2</li> 
 
     <li class="list-group-item checked">Sublist 3</li> 
 
    </ul> 
 
    </li> 
 
</ul>

另外請注意，我刪除了使用javascript;在a元素href屬性。您可以改爲在事件上調用preventDefault()以停止默認行爲。該方法具有將JS邏輯與HTML分離的優點。

Answer 2

$("ul.list-group-sub").slideToggle()目標全部分項。使用此：

$(this).closest('.list-group-item').find('.list-group-sub').slideToggle(); 

目標對應的列表分項。下面

觀看演示和更新fiddle here：

$(".list-group-item .dd").click(function() { 
 
    $(this).closest('.list-group-item').find('.list-group-sub').slideToggle(); 
 
});

ul.list-group-sub { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list-group member-list trainers-data ot-box"> 
 
    <li class="list-group-item"> 
 
    List 1 
 
    <span class="label"> 
 
     <a href="javascript:;" class="dd">Click</a> 
 
    </span> 
 
    <ul class="list-group-sub"> 
 
     <li class="list-group-item checked">Sublist 1</li> 
 
     <li class="list-group-item checked">Sublist 2</li> 
 
     <li class="list-group-item checked">Sublist 3</li> 
 
    </ul> 
 
    </li> 
 
    <li class="list-group-item"> 
 
    List 2 
 
    <span class="label"> 
 
     <a href="javascript:;" class="dd">Click</a> 
 
    </span> 
 
    <ul class="list-group-sub"> 
 
     <li class="list-group-item checked">Sublist 1</li> 
 
     <li class="list-group-item checked">Sublist 2</li> 
 
     <li class="list-group-item checked">Sublist 3</li> 
 
    </ul> 
 
    </li> 
 
</ul>