Question

我使用Bootstrap data-toggle="dropdown"在标题中有一个下拉菜单。单击下拉按钮时，应显示一个列表。单击标题时，内容应上下滑动。

问题是，当我点击下拉按钮时，它也会触发标题。这里通常的答案是e.stopPropagation，但是当我使用它时，它也会停止显示下拉菜单。

如何阻止下拉按钮触发标题？

HTML

<div id="top">
  <div class="dropdown">
    <button type="button" class="dropdown-toggle" data-toggle="dropdown">
      Show List
    </button>
    <ul class="dropdown-menu">
      <li>Some Item</li>
      <li>Some Item</li>
      <li>Some Item</li>
    </ul>
  </div>
</div>
<div id="content" class="collapse">
  This is the actual content
</div>

JS

// CANNOT USE BOOTSTRAP DATA-TARGET !
$('#top').click(function() {
  $('#content').collapse('toggle')
})
$('button').click(function(e) {
  //e.stopPropagation();
})

我准备了fiddle来说明这个问题。

Answer 1

您应该过滤event.target点击#top元素：

$('#top').click(function(e) {
  if($(e.target).closest('button[data-toggle], .dropdown-menu').length) return;
  $('#content').collapse('toggle')
})

-jsFiddle-

Answer 2

你也可以这样做。

// CANNOT USE BOOTSTRAP DATA-TARGET !
$('#top').click(function(e) {
    if(e.target.type != "button"){
      $('#content').collapse('toggle')
  } 
})
$('button').click(function(e) {
  //e.stopPropagation();
})

Answer 3

另一种方法是，使用e.target确定点击的元素是否为#top：

$('#top').click(function(e) {
   if(e.target.id=="top"){
        $('#content').collapse('toggle')
   } 
})
$('button').click(function(e) {
  //e.stopPropagation();
})

停止对特定元素的传播

3 个答案:

-jsFiddle-