隱藏所有DL元素，除了一個

Question

我有一個簡單的手風琴Codepen Example以下標記：

<dl> 
    <dt class="link">dt 01</dt> 
    <dd class="pane">dd 01</dd> 
    <dt class="link">dt 02</dt> 
    <dd class="pane">dd 02</dd> 
</dl> 

和我有以下幾點：

$(document).ready(function() { 
    $('dl').children('.pane').hide(); 
    $('dl').children('.link').bind('click', function(event) {    
    $(this).toggleClass('active');     
    $(this).next('.pane').toggle().toggleClass('active'); 
    }); 
}); 

當DT點擊下一個DD打開，都獲得CSS類「活躍」。

但是，當單擊DT時，我想隱藏任何當前打開的dd並刪除其活動類...我該怎麼做？

我在選擇所有不是單擊DT後單擊的DL時遇到問題。

Answer 1

您可以使用siblings()在這種情況下

$(document).ready(function() { 
 
    $('dl').children('.pane').hide(); 
 
    $('dl').children('.link').bind('click', function(event) { 
 
    $('.link.active').not(this) 
 
     // not for avoiding clicked dl 
 
     .toggleClass('active'); 
 
    $(this).toggleClass('active'); 
 
    $(this).next('.pane').toggle().toggleClass('active') 
 
     .siblings('.pane') 
 
     // get sibling dd 
 
     .hide(); 
 
    // hide them 
 
    }); 
 
});

dl { 
 
    width: 200px; 
 
} 
 
dt { 
 
    background-color: #F0F0F0; 
 
    cursor: pointer; 
 
    padding: 8px; 
 
} 
 
dd { 
 
    padding: 8px; 
 
    margin: 0; 
 
} 
 
dt.active:after { 
 
    content: '\f068'; 
 
} 
 
dt:after { 
 
    color: #606060; 
 
    content: '\f067'; 
 
    font-family: FontAwesome; 
 
    font-size: 14px; 
 
    padding: 2px; 
 
    text-align: right; 
 
    float: right; 
 
} 
 
dd.active {}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<dl> 
 
    <dt class="link">dt 01</dt> 
 
    <dd class="pane">dd 01</dd> 
 
    <dt class="link">dt 02</dt> 
 
    <dd class="pane">dd 02</dd> 
 
    <dt class="link">dt 03</dt> 
 
    <dd class="pane">dd 03</dd> 
 
    <dt class="link">dt 04</dt> 
 
    <dd class="pane">dd 04</dd> 
 
</dl>

Answer 2

單擊，只需刪除全部.active類實例，然後根據需要將其添加到事件目標。

$('select all dds') 
    .removeClass('active') 
    .next('.pane') 
     .removeClass('active'); 

$(this).toggleClass('active'); 
$(this).next('.pane').toggle().toggleClass('active'); 

更新：我的錯，我沒有看到你想隱藏的DD也。因此，代碼（你可以看到它在行動here）將是：

$('dl').children('.pane').hide(); 
$('dl').children('.link').bind('click', function(event) {    

    $(this).parent() /* Get the parent DL */ 
     .find('.active') /* find all active objects */ 
      .removeClass('active') /* deactivate them */ 
      .filter('dd') /* find the DD's in there */ 
       .hide(); /* Hide them. */ 

    /* Now show this one. */ 
    $(this) 
     .addClass('active') 
     .next('.pane').addClass('active').toggle(); 
    }); 

另外，如果你希望能夠重新關閉一個DD：

var alreadyActive = $(this).hasClass('active'); 

    $(this).parent() /* Get the parent DL */ 
     .find('.active') /* find all active objects */ 
      .removeClass('active') /* deactivate them */ 
      .filter('dd') /* find the DD's in there */ 
       .hide(); /* Hide them. */ 

    /* Now show this one, if it wasn't active before */ 
    if (!alreadyActive) { 
     $(this) 
     .addClass('active') 
     .next('.pane').addClass('active').toggle(); 
    }