如何切换所有div标签

Question

如何？单击.button时，隐藏所有.body div标签并显示最接近的.body标记div

我的代码第一个可以工作，但是当点击.button时，显示.body，但再次点击时，是否会切换（显示/隐藏）那个？

如何正确地做到这一点？

编辑：如何更改.button＆gt;跨度图标？ （正面或负面）

编辑：jQuery（this）.find（＆＃39; positive＆＃39;）。toggleClass（＆＃39; negative＆＃39;）; ？

编辑（saitho）：JSFiddle：https://jsfiddle.net/nL4sxbj0/2/

HTML

<div class="box">

  <div class="header">

    <a href="#" class="button">

      <span class="positive"></span>

    </a>

  </div>

  <div class="body">

  </div>

</div>

CSS

.body {
  display:none;
}

.button .positive,
.button .negative {
  width:36px;
  height:36px;
  float:right;
  display:block;
  cursor:pointer;
}

.button .positive {
  background:url('../img/icon-del.png') no-repeat center center / 18px;
}

.button .negative {
  background:url('../img/icon-opn.png') no-repeat center center / 18px;
}

JQUERY

jQuery('.button').on('click' ,function(e) {

    e.preventDefault(); // Is this necessary? for <a href="#"></a>

    jQuery('.body').hide(); // Problem is hear i think

    jQuery(this).closest('.box').find('.body').toggle(); 

});

图片

Answer 1

问题是你有：

jQuery('.body').hide();

在您的click回调中

，这意味着body div首先被隐藏，然后toggle正常工作 - 它会显示div。但是它无法隐藏它，就像之前toggle一样，你总是先隐藏div

删除此行，它应该有效，请在此处查看：JS Fiddle

Answer 2

将班级iconbtn添加到按钮范围

<div class="box">

  <div class="header">

    <a href="#" class="button">

      <span class="iconbtn positive"></span>

    </a>

  </div>

  <div class="body">

  </div>

jQuery('.button').on('click' ,function(e) {
     e.preventDefault();

     var box = jQuery(this).closest('.box');

     var closestBody = box.find('.body');
     jQuery('.body').not(closestBody).hide(); // Hide all except above div

     jQuery(closestBody).toggle(); // if visible hide it else show it

     jQuery('.iconbtn').removeClass('negative').addClass('positive');     
     var iconBtn = box.find('.iconbtn');

     if (jQuery(closestBody).is(':visible')) {
       iconBtn.removeClass('positive').addClass('negative');
     } else {
       iconBtn.removeClass('negative').addClass('positive');
    }
});

jsFiddle Link