当其中一个面板以手风琴形式打开时关闭其他面板

Question

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

这是我的 HTML、CSS 和 JS

$(".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');

/* 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 */

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

这是 JSFiddle link http://jsfiddle.net/bupd32rq/3/

感谢您的帮助:)

Answer 1

找到其他兄弟accx元素后就可以使用slideUp()功能了

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

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

JSfiddle demo

代码片段

$(".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');

/* 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 */

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

当其中一个面板以手风琴形式打开时关闭其他面板

Close other panels when one of the panel opened in accordion

html

javascript

css

jquery

accordion