从事件处理程序调用时，Bootstrap Dropdown 切换不起作用答案

【问题标题】：Bootstrap Dropdown toggle doesn't work when called from an event handler从事件处理程序调用时，Bootstrap Dropdown 切换不起作用
【发布时间】：2013-05-22 22:12:32
【问题描述】：

我有一个元素、下拉菜单和一些 jquery 来动态切换下拉菜单。但是，从事件处理程序调用时切换不起作用。我已经尝试了相关 Stackoverflow 答案所建议的所有内容，但没有任何效果:(

JavaScript：

$(function(){
  //$(".dropdown-toggle").dropdown('toggle'); // this works
  $('#click').click(function(){
    $(".dropdown-toggle").dropdown('toggle'); // this doesn't
  });
});

HTML：

<div class="dropdown clearfix">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
   <ul id="dropdown" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
      <li><a tabindex="-1" href="#">Action</a></li>
      <li><a tabindex="-1" href="#">Another action</a></li>
      <li><a tabindex="-1" href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a></li>
    </ul>
  </div>
<br>
<div id="click">Click to toggle</div>

这是工作（不是！）示例：http://bootply.com/61988

【问题讨论】：

标签： jquery twitter-bootstrap drop-down-menu

【解决方案1】：

只需停止传播事件，它应该可以工作。

$(function(){
  //$(".dropdown-toggle").dropdown('toggle'); // this works
  $('#click').click(function(e){
      e.stopPropagation();
    $(".dropdown-toggle").dropdown('toggle');// this doesn't
  });
});

Fiddle

Bootply

【讨论】：

工作就像一个魅力！虽然我的实际情况比这复杂得多，但你的回答帮助了我。
它节省了我的时间 :) 自从过去 1 个多小时以来，我一直在尝试解决这个问题......顺便谢谢
在我尝试了所有其他答案之后，这个有效！谢谢楼主！
这是最好的答案，经过大量时间浪费在无用的答案上！非常感谢

【解决方案2】：

对于这里的vue用户，。你可以用这个。

<div class="dropdown clearfix">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
   <ul id="dropdown" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
      <li><a tabindex="-1" href="#">Action</a></li>
      <li><a tabindex="-1" href="#">Another action</a></li>
      <li><a tabindex="-1" href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a></li>
    </ul>
  </div>
<br>
<div @click.stop="toggleDropdown()">Click to toggle</div>

脚本

methods: {
   toggleDropdown(){
       $(".dropdown-toggle").dropdown('toggle');
   }
}

【讨论】：