仅通过单击单个元素打开和关闭 Bootstrap 下拉列表

Question

我有一个简单的 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>

Answer 1

一个解决方案可能是绑定到主体上的点击事件，并检查您是否按下了下拉菜单的 link。

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

当隐藏下拉列表的事件运行时，return pressedLink 变量。如果您 return 从事件中判断为 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>

仅通过单击单个元素打开和关闭 Bootstrap 下拉列表

Open and close Bootstrap dropdown by clicking a single element only

javascript

jquery

twitter-bootstrap-3