如何阻止jquery手风琴 - onclick打开所有手风琴

Question

我正在尝试制作手风琴，但是当点击如何停止所有项目并仅应用所点击的项目时，它会打开所有项目。

JSfiDDle

$("#toggle>h4.vpm-tab-index").on("click", function(e) {
  e.stopPropagation();
  if ($('#toggle>div.vpm-content-tab').hasClass("closed")) {
    $("#toggle>div.vpm-content-tab").css("display", "block");
    $("#toggle>div.vpm-content-tab").removeClass('closed');
    $("#toggle>div.vpm-content-tab").addClass('opened');
  } else {
    $("#toggle>div.vpm-content-tab").removeClass('opened');
    $("#toggle>div.vpm-content-tab").addClass('closed');
    $("#toggle>div.vpm-content-tab").css("display", "none");
  }
});

.vpm-tab-index {
  border: 2px solid #ddd;
  padding: 15px;
  display: block;
  cursor: pointer;
}

.vpm-tab-index:before {
  content: "\f067";
  float: left;
  margin-right: 10px;
  font-family: fontawesome;
}

.vpm-content-tab {
  background: #f9f8f8;
  padding: 11px;
  margin-top: -11px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle" class="toggle">
  <h4 class="vpm-tab-index tab-opened"><span class="icon-minus-sign"></span> Quick Info</h4>
  <div class="vpm-content-tab closed" style="display: none;">
    <p>Quite possibly the best customer service I have ever received from an online retailer.</p>
  </div>
</div>

<div id="toggle" class="toggle">
  <h4 class="vpm-tab-index tab-opened"><span class="icon-minus-sign"></span> Quick Info</h4>
  <div class="vpm-content-tab closed" style="display: none;">
    <p>Quite possibly the best customer service I have ever received from an online retailer.</p>
  </div>
</div>

Answer 1

1. 对多个元素使用相同的ID（#toggle）无效。
2. 您需要为{strong>所有 div.vpm-content-tab元素设置类，而您只需在下一个tab设置它。

像这样：

（请注意，您可以像我在示例中一样链接jQuery方法，请在此处阅读更多相关信息：https://www.w3schools.com/jquery/jquery_chaining.asp）

＆＃13;
＆＃13;
$(".toggle>h4.vpm-tab-index").on("click", function(e) {
  e.stopPropagation();
  var tab = $(this).next();
  if (tab.hasClass("closed")) {
    tab.show().removeClass('closed').addClass('opened');
  } else {
    tab.hide().addClass('closed').remove('opened');
  }
});
＆＃13;
.vpm-tab-index {
  border: 2px solid #ddd;
  padding: 15px;
  display: block;
  cursor: pointer;
}

.vpm-tab-index:before {
  content: "\f067";
  float: left;
  margin-right: 10px;
  font-family: fontawesome;
}

.vpm-content-tab {
  background: #f9f8f8;
  padding: 11px;
  margin-top: -11px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle">
  <h4 class="vpm-tab-index tab-opened"><span class="icon-minus-sign"></span> Quick Info</h4>
  <div class="vpm-content-tab closed" style="display: none;">
    <p>Quite possibly the best customer service I have ever received from an online retailer.</p>
  </div>
</div>

<div class="toggle">
  <h4 class="vpm-tab-index tab-opened"><span class="icon-minus-sign"></span> Quick Info</h4>
  <div class="vpm-content-tab closed" style="display: none;">
    <p>Quite possibly the best customer service I have ever received from an online retailer.</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;