jquery - 如何停止 jquery Accordion - onclick 打开所有 Accordion

Question

我正在尝试制作一个 Accordion ，但当单击如何停止所有项目并仅应用单击的项目时，它会打开所有项目。

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. 您可以为所有 div.vpm-content-tab 元素设置类，而您只需要在下一个选项卡上设置它。

像这样:

(请注意，您可以像我在示例中所做的那样链接 jQuery 方法，请在此处阅读更多相关信息: https://www.w3schools.com/jquery/jquery_chaining.asp )

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

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