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">，但似乎不起作用。我一直在尝试将类更改为id，但这无济于事。有没有人有什么建议？我将不胜感激。

Answer 1

尝试使用slideToggle方法：

jQuery slideToggle（）方法

在所有

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

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

它具有以下参数：

速度

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

毫秒
“慢”
“快速”

放松

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

“摆动”-在开头/结尾处移动较慢，而在中间位置则较快
“线性”-以恒定速度移动

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

回调

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

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

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

1 个答案: