当面板之一以手风琴式打开时关闭其他面板答案

【问题标题】：Close other panels when one of the panel opened in accordion当面板之一以手风琴式打开时关闭其他面板
【发布时间】：2015-11-11 09:44:06
【问题描述】：

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

这是我的 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 链接http://jsfiddle.net/bupd32rq/3/

感谢您的帮助:)

【问题讨论】：

标签： javascript jquery html css accordion

【解决方案1】：

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

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

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

JSfiddle demo

代码 sn-p

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

【讨论】：