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

【问题标题】：Collapsible element using javascript how to collapse by default使用javascript的可折叠元素如何默认折叠
【发布时间】：2022-01-03 13:03:39
【问题描述】：

我正在尝试创建可折叠元素，我希望在第一次加载时默认将所选项目展开。现在所有的物品都默认消耗掉了。

例如，我希望第一个和最后一个项目默认展开，直到我点击折叠它，第二和第三个默认折叠，直到我点击展开它。

这是我正在使用的代码。

非常感谢您的帮助。

我也不了解这段代码的功能。那么请有人向我解释一下 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>

【问题讨论】：

首先你说first and last item to be expended by default，但你也说last to be colllapsed by default所以最后是否应该折叠？
我的错我希望第一个和最后一个被消耗，第二个和第三个被折叠

标签： javascript html jquery css

【解决方案1】：

你可以这样做：

$(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>

【讨论】：