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

标签 javascript jquery css

我知道这里有几个关于 Accordion 的主题，但似乎没有一个与我当前的结构相匹配，直到现在我认为它非常有效。 我正在尝试从头开始构建元素作为一种学习方法，并在谷歌搜索和试验后构建以下 Accordion 。目前唯一的问题是，如果我在已经打开一个问题的情况下单击另一个问题，则已经打开的问题将保持 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>

最佳答案 

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

关于javascript - 如何在 Accordion 上创建打开和关闭状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59426915/

上一篇：html - 发布体内定心形式 | HTML

下一篇：javascript - 覆盖链接的按钮

相关文章：

javascript - 无法从 Promise 的 then 函数设置状态

javascript - 如何用不同的字符替换出现的相同字符

javascript - JS 切换(显示)文本最简单的方法

javascript - 通过 jQuery 激活类冲突

javascript - ng-map只打开远程KML文件而不打开本地文件？

javascript - ReactJS - 处理整个部分的 onClick 事件，除了几个子元素

javascript - 无法删除菜单下拉菜单中的 dropotron 透明度

javascript - 短时间内改变颜色 JavaScript 和 CSS

javascript - 如何在 Angular 2 模板中开始新行

javascript - 谷歌地图无法正常工作

©2024 IT工具网  联系我们