javascript - 在 Bootstrap 3 按钮下拉菜单中添加滑动功能的问题

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

All dropdown events are fired at the .dropdown-menu's parent element. link

您需要使用

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

参见this fiddle .