防止下拉菜单在点击菜单项时关闭

Question

我正在使用Bootstrap 4 alpha6。以下是我的下拉菜单HTML代码：

<div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button" id="dropdownMenu2" aria-haspopup="true" aria-expanded="false">
   Dropdown
   </button>
   <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
      <h6 class="dropdown-header">
         <input class="form-control form-control-sm" type="text" placeholder="Search">
      </h6>
      <button class="dropdown-item" type="button">Action</button>
      <button class="dropdown-item" type="button">Another action</button>
      <button class="dropdown-item" type="button">Something else here</button>
   </div>
</div>

我想要的是，在某人点击 .dropdown-menu 内的任何项目时，不要关闭下拉菜单。我编写了以下JS代码，但它并没有起作用，也就是说，当单击菜单项时，Bootstrap下拉菜单仍然会关闭。

<script type="text/javascript">
  $(function() {
      $('.dropdown-menu button').on('click', function (event) {
        console.log(event)
        event.preventDefault();
      })
  });
</script>

- hobby-coder

---

你尝试过使用event.stopPropagation吗？https://api.jquery.com/event.stoppropagation/ 或者 event.stopImmediatePropagation？ - random_user_name

我尝试过 stopPropagation 但没有尝试另一个。让我也试试那个。 - hobby-coder

@cale_b 仍然是同样的问题。问题在于我也看不到 console.log 的输出... - hobby-coder

Answer 1

在您的脚本文件中，您正在查找下拉菜单类内部的p标签，但您没有任何p标签。尝试编写： ```

  $('.dropdown-item').on('click', function (event) {
        console.log(event)
        event.preventDefault();
      })

```

- Joe

---

那是我的笔误，我已经修正了。 - hobby-coder

Answer 2

您需要使用以下事件而不是click：

hide.bs.dropdown：当调用隐藏实例方法时，立即触发此事件。

当您单击按钮时，可以将数据属性设置为下拉菜单以保存状态。一开始，您可以将此值设置为false。最后，当下拉菜单隐藏时，您可以测试此值并重置状态。

此事件必须附加到您的dropdown元素：

$('.dropdown-menu button').on('click', function(e) {
    $('.dropdown').data('canBeClosed', true);
})
$('.dropdown').data('canBeClosed', false);
$('.dropdown').on('hide.bs.dropdown', function (evt) {
    console.log('Event fired: ' + evt.type);
    if ($('.dropdown').data('canBeClosed') == false) {
        evt.preventDefault();
    } else {
        $('.dropdown').data('canBeClosed', false);
    }
})

$('.dropdown-menu button').on('click', function(e) {
    $('.dropdown').data('canBeClosed', true);
})
$('.dropdown').data('canBeClosed', false);
$('.dropdown').on('hide.bs.dropdown', function (evt) {
    if ($('.dropdown').data('canBeClosed') == false) {
        evt.preventDefault();
    } else {
      $('.dropdown').data('canBeClosed', false);
    }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>


<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button" id="dropdownMenu2" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <h6 class="dropdown-header">
            <input class="form-control form-control-sm" type="text" placeholder="Search">
        </h6>
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
    </div>
</div>

- gaetanoM

---

可以，但是当您单击“ .dropdown-toggle”按钮时，您无法关闭它。这不是我想要的。 - hobby-coder

当您在.dropdown外面点击或单击.dropdown-toggle按钮时。 - hobby-coder

谢谢。在我发帖到 Stack Overflow 之前，我已经尝试了你展示的方法，但是没有成功。之后我就毫无头绪地来到这里了。:) 请慢慢来，没问题。 - hobby-coder

@hobby-coder 答案和代码片段已更新。希望它能按照你的期望工作。 - gaetanoM