在引导程序 3 按钮下拉列表中添加滑动功能时出现问题

Issue On Adding Slide Function on Bootstrap 3 Button Dropdown

本文关键字：功能 问题 添加 引导程序 按钮 下拉列表      更新时间：2023-09-26

您能否看看此演示，并让我知道为什么我无法将幻灯片功能添加到 Bootstrap 3 按钮下拉列表中？

<!-- Split button -->
<div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="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>

<script>
  $('.dropdown-toggle').on('show.bs.dropdown', function (e) {
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });
  $('.dropdown-toggle').on('hide.bs.dropdown', function (e) {
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });
</script>

谢谢

所有下拉事件都在 .dropdown-menu 的父元素处触发。

链接

您需要使用 

$('.btn-group').on('show.bs.dropdown', function() { ... });

看到这个小提琴。

工作示例

http://jsfiddle.net/br0jkp1u/6/

  $('#example').on('click', function () {
      $('ul.dropdown-menu').slideToggle();
  });
 <button id="example" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

签入更新的小提琴：http：//jsfiddle.net/br0jkp1u/7/

[Fiddle][1]
相关文章：