jquery - slideToggle 如何与 Bootstrap 一起使用？

Question

所以我正在制作一个页面，我需要一个 slideToggle 列表，里面大约有五个元素，但我不确定如何继续。对于这个元素，我尝试使用 Bootstrap 和 JQuery

下面是我的全部代码:

$(document).ready(function() {
  $(".list").click(function() {
    $(".item").slideToggle("fast");
  });
});

body {
  background-color: #252525;
  font-family: 'roboto';
  width: 90%;
}

#container {
  padding-top: 2%;
  padding-left: 1%;
}

.list {
  color: white;
  font-size: 30px;
  text-align: center;
  background-color: purple;
  cursor: pointer;
  display: block;
  font-family: 'roboto';
}

.item {
  background-color: purple;
  color: white;
  display: none;
  font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="row">
    <div class="col-4 col-md-3">
      <div class="list">
        Choose item<i class="icon-down-big"></i>
      </div>
      <div class="item">This should slide down on click on Purple div</div>
      <div class="item">This should slide down on click on Purple div</div>
    </div>
  </div>
</div>

我认为点击 <div class="list">我会看到 <div class="item"> ，但它似乎没有用。我一直在尝试将 classes 更改为 id，但没有帮助。有没有人有什么建议？我将不胜感激。

Answer 1

尝试使用 slideToggle 方法:

jQuery slideToggle() 方法

为所有

元素在 slideUp() 和 slideDown() 之间切换:

$("button").click(function(){
  $("p").slideToggle();
});

它有以下参数:

速度

可选。指定幻灯片效果的速度。默认值为 400 毫秒可能的值:

• 毫秒
• “慢”
• “快”

缓动

可选。指定元素在动画不同点的速度。默认值为“swing” 可能的值:

• “摆动”- 在开始/结束时移动速度较慢，但​​在中间速度较快
• “线性”- 以恒定速度移动

提示:外部插件提供了更多缓动功能

回调

可选。 slideToggle()方法完成后要执行的函数

https://www.w3schools.com/jquery/eff_slidetoggle.asp