slideToggle 如何与引导程序一起使用？

【问题标题】：How does slideToggle work with bootstrap?slideToggle 如何与引导程序一起使用？
【发布时间】：2019-05-03 02:09:01
【问题描述】：

所以我正在制作一个页面，我需要一个包含大约五个项目的 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，但这没有帮助。有没有人有什么建议？我将不胜感激。

【问题讨论】：

• 您需要打开一个包含所有列表元素的切换开关吗？
• 您好，您的问题不清楚。单击按钮时要切换什么？
• 嗨，我想让

  可点击，所以我会看到默认设置为隐藏的
• 它看起来工作正常。您单击“选择项目”，并且希望看到 div“单击 Purple div 时应该向下滑动”。仍然有点不清楚你在问什么。是否应该有另一个嵌套点击？
• 我已经更换了浏览器，一切正常，但似乎遇到了一些问题。感谢您的建议