代码之家 › 专栏 › 技术社区 › Brenden Baio

jQuery:当我点击不同的幻灯片时,如何使已经打开的手风琴幻灯片折叠?

accordion css jquery html javascript

Brenden Baio · 技术社区 · 2 年前

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

我有一个功能齐全的手风琴,当我点击下一个时,我很难让它自动折叠成一个打开的幻灯片。如有任何帮助,我们将不胜感激,谢谢。

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:

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

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;
}

1 回复 | 直到 2 年前

Vivekanand Vishvkarma 2 年前

将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);
                }
            });
        });

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前