个人中心
gpt4 book ai didi

jQuery: How do I make an already open accordion slide collapse when I click on a different slide?(JQuery：当我点击不同的幻灯片时，如何使已经打开的手风琴幻灯片折叠？)

转载 作者：bug小助手 更新时间：2023-10-24 17:54:43 26 4
gpt4 key购买 nike



Working codepen link: https://codepen.io/boingloings33/pen/PoXpLWR

工作代码链接：https://codepen.io/boingloings33/pen/PoXpLWR


I have a mostly functioning accordion that I'm struggling to make auto-collapse an open slide when I click the next one. Any help would be greatly appreciated, thank you.

我有一架基本可以正常使用的手风琴，当我点击下一张幻灯片时，我正在努力使其自动折叠为打开的幻灯片。如有任何帮助，我们将不胜感激，谢谢。


HTML:

Html：


<body>
    <div class="container">
      <div class="accordion" id="accordion-1">
        <div class="head">
          <h2>Title 1</h2>
        </div>
        <div class="content">
          <p> lorem ipsum </p>
        </div>
      </div>

      <br />

      <div class="accordion" id="accordion-2">
        <div class="head">
          <h2>Title 2</h2>
          <i class="fas fa-angle-down arrow"></i>
        </div>
        <div class="content">
         <p> lorem ipsums </p>
        </div>
      </div>
</body>

JS:

JS：


jQuery(function () {
  $(".head").on("click", function () {
    $(this).toggleClass("active");
    $(this).parent().find(".arrow").toggleClass("arrow-animate");
    $(this).parent().find(".content").slideToggle(280);
  });
});


CSS:

Css：


.accordion {
  box-shadow: 0px 1px 7px #dbdbdb;
}

.accordion .head {
  background-color: #ffffff;
  color: #563e6e;
  padding: 20px 30px;
  cursor: pointer;
  transition: 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion .head:hover,
.accordion .active {
  background-color: #ffe77aff;
}
.accordion .content {
  background-color: #ffffff;
  display: none;
  padding: 20px 30px;
  color: #333333;
}

更多回答
优秀答案推荐

Replace the js code with the below code

将js代码替换为以下代码


jQuery(function () {
            $(".head").on("click", function () {              
                let isActive = $(this).hasClass('active');
                $(".head").removeClass('active');
                $(".head").parent().find(".content").slideUp(280);
                $(".head").parent().find(".arrow").removeClass("arrow-animate");
                if (isActive == false) {
                    $(this).addClass('active')
                    $(this).parent().find(".arrow").addClass("arrow-animate");
                    $(this).parent().find(".content").slideDown(280);
                }
            });
        });

更多回答

Beautiful, thank you so much.

太好了，太谢谢你了。

26 4 0
文章推荐： Athena Unload TEXTFILE with null(Athena使用NULL卸载TEXTFILE)
文章推荐： Some devcontainer images don't work in IntelliJ(某些DevContainer图像在IntelliJ中不起作用)
文章推荐： Does Google Cloud Translation API support language like "en-US"?(谷歌云翻译API是否支持像“en-US”这样的语言？)
文章推荐： How to create a directory with a UNC path in a powershell script with ansible?(如何使用Anable在PowerShell脚本中创建一个带有UNC路径的目录？)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com