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类＆＃34;活动＆＃34;。

但是当点击DT时我想隐藏当前打开的任何dd并删除它的活动类......我该怎么做？

我在选择所有不是被点击的DT之后的DL时遇到了问题。

Answer 1

点击后，只需删除所有 .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();
  }

Answer 2

在这种情况下，你可以使用 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>

隐藏除一个之外的所有DL元素

2 个答案: