使用javascript的可折疊元素如何默認折疊-有解無憂

我正在嘗試創建可折疊元素，我希望在第一次加載時默認使用所選專案。現在所有專案都默認消耗。

例如，我希望默認情況下第一個和最后一個專案被消耗，直到我點擊折疊它，第二個和第三個被默認折疊，直到我點擊它。

這是我正在使用的代碼。

非常感謝您的幫助。

此外，我不了解此代碼的功能。那么請有人向我解釋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>

uj5u.com熱心網友回復：

你可以這樣做：

$(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到您希望默認顯示的類中。

我還啟用了線display:none的.buy-info .con

演示

顯示代碼片段

// 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/366029.html

標籤：javascript html 查询 css

上一篇：Javascript-如何訪問特定按鈕

下一篇：jQuery不隱藏標簽和元素