我如何在手风琴上创建打开和关闭状态？

Question

我知道手风琴上有几个线程，但是似乎没有一个与我当前的结构相符，直到现在我还认为它非常有效。我正在尝试从头开始构建元素，并将其作为一种学习方法，并在经过一些谷歌搜索和实验后构建以下手风琴。目前唯一的问题是，如果我在已经打开的另一个问题上单击另一个问题，那么已经打开的问题将保持CSS好像仍在打开，因此removeClass无法正常工作。如果单击已经打开的问题，将其关闭，然后再打开另一个，则它只会删除该类。

$(".toggle-trigger").on("click", function() {
  var content = $(this).parent().find(".toggle-container");
  var title = $(this).parent().find(".toggle-trigger");

  if ($(content).hasClass("open")) {
    $(content).slideUp(500).removeClass("open");
    $(title).removeClass("open");

  } else {
    $(".toggle-container.open").slideUp(500).removeClass("open"); //will close all others
    $(content).slideDown(500).addClass("open");
    $(title).addClass("open");
  }
});

body {
  background-color: grey;
  font-family: sans-serif;
}

.toggle {
  padding: 1rem;
  background-color: cyan;
  border-radius: 10px;
  margin-bottom: 1rem;
  
}

.toggle-trigger {
  margin: 0px !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgMTBoLTEwdi0xMGgtNHYxMGgtMTB2NGgxMHYxMGg0di0xMGgxMHoiLz48L3N2Zz4=');
  background-position: 100% 50%;
  background-size: 1rem;
  background-repeat: no-repeat;
  font-weight: 500;
}

.toggle-trigger:hover {
  text-decoration: none;
  cursor: pointer;
}

.toggle-trigger a {
  color: #333;
  text-decoration: none;
  display: block;
}

.toggle-trigger.open {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAxMGgyNHY0aC0yNHoiLz48L3N2Zz4=') !important;
  font-weight: 600;
}

.toggle-container {
  overflow: hidden;
  padding: 1rem;
  font-weight: 300;
  line-height: 1.3;
  display: none;
}

.toggle-container .extra {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle">
  <div class="toggle-trigger">Question 1</div>
  <div class="toggle-container">
    Ut fringilla varius ipsum, id faucibus orci aliquet id. Donec ipsum nibh, placerat vel efficitur sed, finibus eget velit. Sed ultrices bibendum fringilla. Donec diam felis, scelerisque nec fermentum in, consectetur eget mi. Nulla elementum nunc a auctor
    gravida. Suspendisse arcu ipsum, rutrum a scelerisque sit amet, ultrices aliquet leo. Praesent at ex vitae arcu tempor tincidunt quis non magna. Integer fermentum eros et tempor feugiat. Phasellus tincidunt sem ac nunc laoreet, ultricies porttitor
    arcu ullamcorper. Nam vitae justo congue, molestie mi elementum, vehicula est. Maecenas vel magna condimentum, varius risus vitae, pretium leo. Nunc blandit est non velit feugiat, a luctus magna blandit. Curabitur pulvinar euismod elementum. Aenean
    consectetur odio magna, in lacinia lacus lacinia eu. In aliquam ex quis lectus ultricies lacinia. Donec lobortis ex metus, et consequat lorem aliquet non.
    <div class="extra">Extra information like <a href="#">Links</a></div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-trigger">Question 2</div>
  <div class="toggle-container">
    Ut fringilla varius ipsum, id faucibus orci aliquet id. Donec ipsum nibh, placerat vel efficitur sed, finibus eget velit. Sed ultrices bibendum fringilla. Donec diam felis, scelerisque nec fermentum in, consectetur eget mi. Nulla elementum nunc a auctor
    gravida. Suspendisse arcu ipsum, rutrum a scelerisque sit amet, ultrices aliquet leo. Praesent at ex vitae arcu tempor tincidunt quis non magna. Integer fermentum eros et tempor feugiat. Phasellus tincidunt sem ac nunc laoreet, ultricies porttitor
    arcu ullamcorper. Nam vitae justo congue, molestie mi elementum, vehicula est. Maecenas vel magna condimentum, varius risus vitae, pretium leo. Nunc blandit est non velit feugiat, a luctus magna blandit. Curabitur pulvinar euismod elementum. Aenean
    consectetur odio magna, in lacinia lacus lacinia eu. In aliquam ex quis lectus ultricies lacinia. Donec lobortis ex metus, et consequat lorem aliquet non.
    <div class="extra">Extra information like <a href="#">Links</a></div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-trigger">Question 3</div>
  <div class="toggle-container">
    Ut fringilla varius ipsum, id faucibus orci aliquet id. Donec ipsum nibh, placerat vel efficitur sed, finibus eget velit. Sed ultrices bibendum fringilla. Donec diam felis, scelerisque nec fermentum in, consectetur eget mi. Nulla elementum nunc a auctor
    gravida. Suspendisse arcu ipsum, rutrum a scelerisque sit amet, ultrices aliquet leo. Praesent at ex vitae arcu tempor tincidunt quis non magna. Integer fermentum eros et tempor feugiat. Phasellus tincidunt sem ac nunc laoreet, ultricies porttitor
    arcu ullamcorper. Nam vitae justo congue, molestie mi elementum, vehicula est. Maecenas vel magna condimentum, varius risus vitae, pretium leo. Nunc blandit est non velit feugiat, a luctus magna blandit. Curabitur pulvinar euismod elementum. Aenean
    consectetur odio magna, in lacinia lacus lacinia eu. In aliquam ex quis lectus ultricies lacinia. Donec lobortis ex metus, et consequat lorem aliquet non.
    <div class="extra">Extra information like <a href="#">Links</a></div>
  </div>
</div>

Answer 1

更改脚本

$(".toggle-trigger").on("click", function() {
  var content = $(this).parent().find(".toggle-container");
  var title = $(this).parent().find(".toggle-trigger");

  if ($(content).hasClass("open")) {
    $(content).slideUp(500).removeClass("open");
    $(title).removeClass("open");

  } else {
    $(".toggle-container.open").slideUp(500).removeClass("open"); //will close all others
    $(".toggle-trigger.open").removeClass("open");
    $(content).slideDown(500).addClass("open");
    $(title).addClass("open");
  }
});