Question

我使用版本3.2.1.min.js和bootstrap4..So如你在示例中看到的那样，我发生了什么与slide1一起显示没有，我不知道为什么会发生这种情况。我想要的是当点击slide1 ... slide2下来然后再次点击slide2上去

＆＃13;

$("ul .slide1").toggle(function(){
  $("ul .slide1 .slide2").slideDown("slow");
}, function(){
  $("ul .slide1 .slide2").slideUp("slow");
})

＆＃13;

ul .slide1 {
  display: block;
}
ul .slide1 .slide2 {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    Hello world1
  </li>
  <li class="slide1">
    Hello world2
    <ul class="slide2">
      <li>hello hello hello</li>
      <li>hello hello hello</li>
      <li>hello hello hello</li>
    </ul>
  </li>
  <li>
    Hello world3
  </li>
</ul>

＆＃13;

Answer 1

您需要设置click事件处理程序，以便在需要时执行操作。而且，您不需要.slideDown()和.slideUp()来电，因为这是.toggle()所做的。

此外，以下是不必要的：

ul .slide1 {
  display: block;
}

因为默认情况下li元素是块元素。

// When the .slide1 list item gets clicked...
$(".slide1").on("click", function(){
  $("ul .slide1 .slide2").toggle("slow");   // Toggle the visibilty of .slide2
});

.slide1 { cursor:pointer; } /* Visual clue to user that this can be clicked */
.slide2 { display:none; }   /* Hidden by default */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Hello world1</li>
  <li class="slide1">Hello world2
    <ul class="slide2">
      <li>hello hello hello</li>
      <li>hello hello hello</li>
      <li>hello hello hello</li>
    </ul>
  </li>
  <li>Hello world3</li>
</ul>

Answer 2

切换需要某种触发器。必须处理您指示所需的点击。在单击触发器内，您可以处理切换。也许是这样的：

$("ul").on("click", function() {
  $("ul .slide1").toggle(function() {
    $("ul .slide1 .slide2").slideDown("slow");
  }, function() {
    $("ul .slide1 .slide2").slideUp("slow");
  })
})

ul .slide1 {
  display: block;
}

ul .slide1 .slide2 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    Hello world1
  </li>
  <li class="slide1">
    Hello world2
    <ul class="slide2">
      <li>hello hello hello</li>
      <li>hello hello hello</li>
      <li>hello hello hello</li>
    </ul>
  </li>
  <li>
    Hello world3
  </li>
</ul>

jQuery 3.2.1 toggle（）不起作用

2 个答案: