当其中一个面板按手风琴打开时，关闭其他面板

Question

当其中一个面板打开时，如何关闭手风琴中的所有面板？我的小组手风琴仍在开放。期望是当我点击其中一个面板时，其他面板会自动关闭。

这是我的HTML，CSS和JS

＆＃13;

＆＃13;

$(".acitemx h3").click(function() {
  $header = $(this);
  $content = $header.next();
  $content.slideToggle(500, function() {
    $(this).parent().toggleClass('current');
  });
});
$('.acitemx').eq(0).addClass('.acitemx').find('.accx').css('display', 'block');

＆＃13;

/* accordion editing */

.accx {
  background: #FFF none repeat scroll 0% 0%;
  padding: 15px;
  display: none;
}
.acitemx {
  margin-bottom: 10px;
  box-shadow: 0px 0px 2px 0px rgb(189, 189, 189);
}
.acitemx h3 {
  cursor: pointer;
  background: #00ADEF none repeat scroll 0% 0% !important;
  color: #FFF !important;
  font-family: "roboto", sans-serif;
  font-weight: bold;
  padding: 8px 40px 8px 15px !important;
  position: relative;
  border-radius: 3px 3px 3px 3px;
}
/* end accordion editing */

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="accordionx">
  <div class="acitemx">
    <h3>First Panel</h3>
    <div class="accx">
      This is the content
    </div>
  </div>
  <div class="acitemx">
    <h3>Second Panel</h3>
    <div class="accx">
      This is the content
    </div>
  </div>
  <div class="acitemx">
    <h3>Third Panel</h3>
    <div class="accx">
      This is the content
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是JSFiddle链接http://jsfiddle.net/bupd32rq/3/

感谢您的帮助：）

Answer 1

您可以在找到其他兄弟slideUp()元素后使用accx函数。

$(this).parent().siblings().find('.accx').slideUp();

与答案无关： $('.acitemx').eq(0).addClass('.acitemx').find('.accx').css('display', 'block');这里addClass不需要.，并且没有逻辑添加另一个同名的类，因为它们已经设置了CSS属性。

JSfiddle demo

代码段

＆＃13;

＆＃13;

$(".acitemx h3").click(function() {
  $header = $(this);
  $content = $header.next();
  $content.slideToggle(500, function() {
    $(this).parent().toggleClass('current');
  });
  $(this).parent().siblings().find('.accx').slideUp(); // Added code
});
$('.acitemx').eq(0).find('.accx').css('display', 'block');

＆＃13;

/* accordion editing */

.accx {
  background: #FFF none repeat scroll 0% 0%;
  padding: 15px;
  display: none;
}
.acitemx {
  margin-bottom: 10px;
  box-shadow: 0px 0px 2px 0px rgb(189, 189, 189);
}
.acitemx h3 {
  cursor: pointer;
  background: #00ADEF none repeat scroll 0% 0% !important;
  color: #FFF !important;
  font-family: "roboto", sans-serif;
  font-weight: bold;
  padding: 8px 40px 8px 15px !important;
  position: relative;
  border-radius: 3px 3px 3px 3px;
}
/* end accordion editing */

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="accordionx">
  <div class="acitemx">
    <h3>First Panel</h3>
    <div class="accx">
      This is the content
    </div>
  </div>
  <div class="acitemx">
    <h3>Second Panel</h3>
    <div class="accx">
      This is the content
    </div>
  </div>
  <div class="acitemx">
    <h3>Third Panel</h3>
    <div class="accx">
      This is the content
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;