javascript - 单击容器/主体上的关闭 Bootstrap 下拉菜单

Question

我已经为 Bootstrap 的下拉菜单添加了一些动画，但现在关闭它的唯一方法是单击按钮。不是很有经验我希望得到一些帮助，我想要的是在单击容器/主体时关闭它。

$('.dropdown-toggle').click(function() {
  $(this).siblings('.dropdown-menu').toggleClass('expanded');
});

body {
  margin: 50px 0 0 250px;
}
.dropdown .dropdown-menu {
  display: block;
  -moz-transition: opacity 0.2s ease-out 0s, -moz-transform 0.2s ease-out 0s, visibility 0s ease-out 0.1s;
  -o-transition: opacity 0.2s ease-out 0s, -o-transform 0.2s ease-out 0s, visibility 0s ease-out 0.1s;
  -webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out, visibility 0s ease-out;
  -webkit-transition-delay: 0s, 0s, 0.1s;
  transition: opacity 0.2s ease-out 0s, transform 0.2s ease-out 0s, visibility 0s ease-out 0.1s;
}
.dropdown .dropdown-menu.collapsed {
  opacity: 0;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  visibility: hidden !important;
}
.dropdown .dropdown-menu.expanded {
  opacity: 1;
  -moz-transform: translateY(12px);
  -ms-transform: translateY(12px);
  -webkit-transform: translateY(12px);
  transform: translateY(12px);
  visibility: visible !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle">
    Dropdown
  </button>

  <ul class="dropdown-menu collapsed" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a>
    </li>
    <li><a href="#">Another action</a>
    </li>
    <li><a href="#">Something else here</a>
    </li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a>
    </li>
  </ul>
</div>

Answer 1

可以通过在body或document中添加点击功能，然后查看目标class或id<来实现/strong> 并根据您选择要执行的操作，这是您的案例的片段

$(document).click(function (e) {
    var clicked = $(e.target);
    var opened = $(".dropdown-menu").hasClass("expanded");
    if (opened === true && !clicked.hasClass("dropdown-toggle")) {
        $(".dropdown-toggle").click();
    }
});

这是一个 fiddle : https://jsfiddle.net/9duqrovc/1/