如何切换所有 div 标签

Question

怎么样？单击 .button 时，隐藏所有 .body div 标签并仅显示最近的 .body 标签 div

我的代码第一个有效，但是当单击 .button 时，显示 .body，但是当再次单击时，不再切换（显示/隐藏）那个了吗？

如何正确操作？

编辑：如何更改 .button > span 图标？ （正面或负面）

编辑：jQuery(this).find('positive').toggleClass('negative'); ？

编辑（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

将 class 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