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

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>

标签： javascriptjquerycss

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"); //add this line
    $(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>

更改脚本

$(".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"); //add this line
    $(content).slideDown(500).addClass("open");
    $(title).addClass("open");
  }
});