Bootstrap 3下拉 - 下拉菜单上的SlideToggle效果打开和关闭

Question

如何从Bootstrap中为Dropdown菜单应用SlideToggle效果？

如果我点击下拉列表，它应该是slideDown，然后在外面点击它应该是slideUp ...

FIDDLE

  

HTML

<div class="btn-group" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Answer 1

添加此jquery DEMO

     $('#ddl').click(function(e){ 
    e.stopPropagation();
if ( $( "ul" ).is( ":hidden" ) ) {
    $( "ul" ).show( "slow" );
    $("ul").addClass("ex");
  } 
    else {
    $( "ul" ).slideUp();
  }
});

$(window).on('click', function(e) {

     $( "ul" ).slideUp();
});