个人中心
gpt4 book ai didi

javascript - 使用javascript的可折叠元素如何默认折叠

转载 作者：行者123 更新时间：2023-12-05 04:41:18 24 4
gpt4 key购买 nike

我正在尝试创建可折叠元素，我希望在首次加载时默认展开所选元素。现在所有的元素都默认展开。

例如，我希望默认展开第一个和最后一个元素，直到我单击将其折叠，第二个和第三个默认折叠，直到我单击将其展开。

这是我正在使用的代码。

非常感谢您的帮助。

此外，我不了解这段代码的功能。那么有人可以向我解释一下 javascript 是如何工作的吗？

谢谢。

最好的，

// expendable info
$(document).ready(function(){

    $('.buy-info .tit').click(function(){
        $(this).toggleClass('active');
        $(this).next('.con').slideToggle(300);
    });
});
.buy-info .notice {
    position: relative;
    background: #f4f4f4;
    border-bottom: 1px solid #fff;
    text-align: center;
    font-size: 14px; line-height: 40px;
    cursor: pointer;
}

.buy-info .tit {
    position: relative;
    background: #f4f4f4;
    border-bottom: 1px solid #fff;
    text-align: center;
    font-size: 14px; line-height: 40px;
    cursor: pointer;
}
.buy-info .tit:after {
    content: '';
    position: absolute; top: 14px; right: 12px;
    width: 6px; height: 6px;
    border: solid #111;
    border-width: 2px 0 0 2px;
    transform: rotate(225deg);
    transition: all .3s;
}
.buy-info .tit.active:after {
    top: 18px;
    transform: rotate(45deg);
}
.buy-info .con {
    /*display: none;*/
    padding: 20px;
    font-size: 11px; line-height: 1.4;
}

#prdInfo {
    display: none;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <link rel="stylesheet" href="untitled.css">
  <script src="untitled.js"></script>

</head>

<body>

  <div class="buy-info">
    <div class="notice">NOTICE</div>
    <div class="tit active"> NOTICE 1</div>
    <div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="tit active">NOTICE 2</div>
    <div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="tit active">Notice3</div>
    <div class="con">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="tit">Notice 4</div>
    <div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>

</body>

</html>

最佳答案

你可以这样做:

$(document).ready(function() {

  $('.buy-info .tit').click(function() {
    $(this).toggleClass('active');
    !$(this).hasClass('active') ? $(this).next('.con').slideUp(300) : $(this).next('.con').slideDown(300);
  });

  $('.buy-info .tit.active').each(function() {
    !$(this).hasClass('active') ? $(this).next('.con').slideUp(300) : $(this).next('.con').slideDown(300);
  })
});

因此，您将 .active 类添加到您希望默认显示的类中。

我还在 .buy-info .con 中启用了 display:none 行

演示

// expendable info
$(document).ready(function() {

  $('.buy-info .tit').click(function() {
    $(this).toggleClass('active');
    !$(this).hasClass('active') ? $(this).next('.con').slideUp(300) : $(this).next('.con').slideDown(300);
  });

  $('.buy-info .tit.active').each(function() {
    !$(this).hasClass('active') ? $(this).next('.con').slideUp(300) : $(this).next('.con').slideDown(300);
  })
});
.buy-info .notice {
  position: relative;
  background: #f4f4f4;
  border-bottom: 1px solid #fff;
  text-align: center;
  font-size: 14px;
  line-height: 40px;
  cursor: pointer;
}

.buy-info .tit {
  position: relative;
  background: #f4f4f4;
  border-bottom: 1px solid #fff;
  text-align: center;
  font-size: 14px;
  line-height: 40px;
  cursor: pointer;
}

.buy-info .tit:after {
  content: '';
  position: absolute;
  top: 14px;
  right: 12px;
  width: 6px;
  height: 6px;
  border: solid #111;
  border-width: 2px 0 0 2px;
  transform: rotate(225deg);
  transition: all .3s;
}

.buy-info .tit.active:after {
  top: 18px;
  transform: rotate(45deg);
}

.buy-info .con {
  display: none;
  padding: 20px;
  font-size: 11px;
  line-height: 1.4;
}

#prdInfo {
  display: none;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <link rel="stylesheet" href="untitled.css">
  <script src="untitled.js"></script>


</head>

<body>


  <div class="buy-info">
    <div class="notice">NOTICE</div>
    <div class="tit active"> NOTICE 1</div>
    <div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="tit">NOTICE 2</div>
    <div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="tit">Notice3</div>
    <div class="con">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="tit active">Notice 4</div>
    <div class="con">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>



</body>

</html>

关于javascript - 使用javascript的可折叠元素如何默认折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70107963/

24 4 0
文章推荐： c - 在函数参数列表中重用变量
文章推荐： c# - 如何从 RSA 私钥在 jwt 中设置 kid header 声明？
文章推荐： azure - 如何在 Azure SQL 数据库中从 DTU 迁移到 vCore
文章推荐： laravel - 更新数据库中的列时出错 - 违反完整性约束 : Column 'xxxxxxxx' cannot be null
行者123
个人简介

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

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