Question

由于我将显示项1和2放在同一位置，因此需要显示，因为单击“一”时将显示结果一，单击两个时将其关闭“一”并显示两个。但是我该怎么做呢？

在切换此设置时遇到了一些麻烦... 它只能单击以显示，然后单击以隐藏..... 另外，slideToggle只能显示“快速”，而不能显示“慢” 我不知道为什么...

$(document).ready(function() {
  $('.ClickNShow1').click(function() {
    $('.Hide1').slideToggle("fast");
  });
  $('.ClickNShow2').click(function() {
    $('.Hide2').slideToggle("fast");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ClickNShow1">click item 1</div>
<div class="Hide1" style="display: none;">show item ONE</div>

<div class="ClickNShow2">click item 2</div>
<div class="Hide2" style="display: none;">show item TWO</div>

<div class="ClickNShow2">click item</div>
<div class="Hide2" style="display: none;">show item</div>

Answer 1

您必须向上滑动所有其他div。

$(document).ready(function() {

  // get all divs
  var divs = $('.Hide1,.Hide2');

  // attach click handler to both 
  $('.ClickNShow1,.ClickNShow2').click(function() {
    //  get div next to the clicked eleemnt
    var div = $(this).next('.Hide1,.Hide2');
    // toggle the div
    div.slideToggle("fast");
    // slideup all other divs
    divs.not(div).slideUp("fast");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ClickNShow1">click item 1</div>
<div class="Hide1" style="display: none;">show item ONE</div>

<div class="ClickNShow2">click item 2</div>
<div class="Hide2" style="display: none;">show item TWO</div>

<div class="ClickNShow2">click item</div>
<div class="Hide2" style="display: none;">show item</div>

FYI：以毫秒为单位提供持续时间，以使其更慢，例如：slideToggle(2000)-这提供了2秒。

拿下from docs：

持续时间以毫秒为单位；较高的值表示较慢的动画，而不是较快的动画。可以提供字符串“ fast”和“ slow”来分别指示持续时间为200毫秒和600毫秒。

如何在点击和隐藏之间切换

1 个答案: