隐藏所有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(); 
    }