仅通过单击单个元素来打开和关闭 Bootstrap 下拉菜单答案

【问题标题】：Open and close Bootstrap dropdown by clicking a single element only仅通过单击单个元素来打开和关闭 Bootstrap 下拉菜单
【发布时间】：2021-06-19 09:01:51
【问题描述】：

我有一个简单的 Bootstrap 3 下拉菜单，除了单击打开它的元素（锚点）外，我希望它始终保持打开状态。所以同一个元素应该负责显示和隐藏下拉菜单。我希望能够在 UI 中的任何位置单击，除了打开和关闭下拉列表的元素。

我已经尝试了许多不同的方法来解决这个问题e.stopPropagation();。我已经用 jQuery .off() 函数试过了..

我成功地解决了使用以下代码在下拉菜单内单击时保持下拉菜单打开的问题，但无论何时在外部单击它都会关闭菜单：

         <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown" data-toggle="dropdown" role="menu"><i class="fa fa-sort-alpha-asc"></i></a>

                <!-- Dropdown Menu -->
                <ul class="dropdown-menu" role="menu">
                    <li>
                        // Menu content
                    </li>
                </ul>
            </li>
        </ul>

    <script>
        $(document).on('click', '.dropdown .dropdown-menu', function (e) {
          e.stopPropagation();
        });
    </script>

【问题讨论】：

标签： javascript jquery twitter-bootstrap-3

【解决方案1】：

一种解决方案可能是绑定到正文上的点击事件，并检查您是否按下了下拉菜单的链接。

如果您单击下拉菜单的链接，请将其保存在变量中 (pressedLink)。

当隐藏下拉菜单的事件运行时，返回pressedLink变量。如果您从事件中返回 false，则不会再发生任何事情，并且下拉菜单保持打开状态。

var pressedLink = false;

$("body").on("click", function(e) {
  if (e.target.id === "only-toggle-when-pressing-me") {
    pressedLink = true;
  } else {
    pressedLink = false;
  }
});

$('.dropdown').on('hide.bs.dropdown', function () {
  return pressedLink;
})

#wrapper {
  background-color: red;
  padding: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.nav {
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="wrapper">
<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a href="#" class="dropdown" data-toggle="dropdown" role="menu"><i id="only-toggle-when-pressing-me" class="fa fa-sort-alpha-asc">link</i></a>
    <!-- Dropdown Menu -->
    <ul class="dropdown-menu" role="menu">
      <li>
        // Menu content
      </li>
    </ul>
  </li>
</ul>
</div>

【讨论】：