个人中心
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:10:46 34 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.

太好了，太谢谢你了。

34 4 0
文章推荐： Stripe iframe for 3d secure authentication doesn't show up on android chrome browser(用于3D安全身份验证的条带iFrame不显示在Android Chrome浏览器上)
文章推荐： Kotlin Annotations @param: without primary constructor(Kotlin注解@param：不带主构造函数)
文章推荐： Error: Could not find info.androidhive:barcode-reader:1.1.5(错误：找不到信息。androidhive：条形码阅读器：1.1.5)
文章推荐： Change row order in a matrix/dataframe with pipes(使用管道更改矩阵/数据帧中的行顺序)
bug小助手
个人简介

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

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