Question

请你看一下This Demo，让我知道为什么我无法在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>

由于

Answer 1

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

您需要使用

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

请参阅this fiddle。

Answer 2

工作示例

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">

Answer 3

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

[Fiddle][1]

在Bootstrap 3按钮下拉列表上添加滑动功能的问题

3 个答案: