Question

HTML

<div style="margin: 0;" class="btn-toolbar">
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Action <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->

            </div>

这是jQuery

$('.btn').unbind().click(function(){
  $('.btn.active').next('.dropdown-menu').slideUp() //Comment this 
  $('.btn.active').removeClass('active'); //Comment this 
  $(this).stop().toggleClass('active');
  $(this).next('.dropdown-menu').stop().slideToggle();
})

这是基本代码。

我的问题是多次点击btn下拉菜单多次打开/关闭。

以前我只有一个下拉列表工作正常。后来我又添加了一个dropdow，为此我添加了两行jQuery来删除active类并关闭其他下拉列表。

如果你评论前两行并检查你发现它正常工作。

如果你可以指导我的话会很棒。

由于

Answer 1

如果用户点击动画中期按钮会发生什么？是否应该忽略点击，还是应该切换状态？

假设后者，最好在动画完成时添加该类，并排除被点击的按钮（$(this)）。这应该可以解决问题。

查看this revised codepen。

多次单击时，jQuery停止不能进行多次下拉

1 个答案: