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

因此，我正在制作一个页面，其中需要一个带有大约五项内容的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">，但似乎不起作用。我一直在尝试将类更改为id，但这无济于事。有没有人有什么建议？我将不胜感激。

最佳答案

尝试使用slideToggle方法：

jQuery slideToggle（）方法

在所有元素的slideUp（）和slideDown（）之间切换：

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

它具有以下参数：

速度

可选的。指定滑动效果的速度。默认值为400毫秒可能的值：


毫秒
“慢”
“快速”


缓和

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


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


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

打回来

可选的。 slideToggle（）方法完成后要执行的功能

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

关于jquery - slideToggle如何与 bootstrap 一起使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55952937/