在容器/正文单击时关闭引导下拉列表

Close Bootstrap Dropdown on Container/Body click

本文关键字：下拉列表 单击 正文      更新时间：2023-09-26

我已经在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>

您可以通过

向正文或文档添加单击函数来实现此目的，然后检查目标类或 ID，并在此基础上选择要执行的操作，这是您的案例的代码片段

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

这是一个小提琴：https://jsfiddle.net/9duqrovc/1/

您应该使用以下命令来添加自定义 CSS 类：

$('.dropdown').on('show.bs.dropdown', function (e) {
  // e.relatedTarget is the toggling anchor element
  e.relatedTarget.next().toggleClass('expanded');
})
相关文章：