27

我在带有插件 jOrgChart 的 div 中有一个 twitter 引导下拉菜单。

我遇到的问题是，当我单击按钮打开下拉菜单时，它还会触发父 div 中的单击事件，该事件会折叠其他元素。

这是我的html：

<div id="chart">
<div class="node">
    <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Actions
        <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" style="text-align:left;">
            <li><a href="#">Edit</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
    </div>
</div>

<div class="node">
...
</div>

我想防止 a.dropdown-toggle 的点击冒泡到 div.node，我尝试了这个：

$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {
            e.stopPropagation();
        });

但现在下拉菜单不起作用。

编辑

这是具体案例： http: //jsfiddle.net/UTYma/2/ （感谢 Joe Tuskan 启动小提琴）

4

6 回答 6

20 
$("#orgchart").jOrgChart({ chartElement: '#chart' });

$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
    e.stopPropagation();
    $('.dropdown-menu').toggle();
});​

停止传播然后切换。例子

我必须将下拉菜单项添加到单击处理程序以保持行为不变。

于 2012-09-07T18:43:18.550 回答
4

尝试这样的事情：

$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {

            e.isDropDownToggleEvent =true;
})

然后：

$("div.node").click(function (e) {
     if (e.isDropDownToggleEvent != null && e.isDropDownToggleEvent)
         return false;

     return true;      
})

您也可以尝试放置 e.preventDefault() 或 e.stopPropagation(); 而不是返回false。

于 2012-09-07T18:39:04.793 回答
1

我用了

$('.multiselect').on('click', function (e) {
    $(this).next('.dropdown-menu').toggle();
    e.stopPropagation();
});

这类似于@Joe 的答案，但更通用一点

于 2015-07-14T10:30:08.627 回答
1

基于乔的回答，这包括在下次点击时关闭的正常下拉功能。

$("#orgchart").jOrgChart({ chartElement: '#chart' });

$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click((e) => {
    e.stopPropagation();
    $('.dropdown-menu').toggle();

    // close on next click only
    $(window).one("click", () => $('.dropdown-menu').toggle());
});​
于 2018-09-04T16:27:51.700 回答
1 
$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
    e.stopPropagation();
    $(this).closest('.dropdown').toggleClass('open');
});​

您应该改用它，因为上述解决方案不会关闭焦点下拉菜单。

于 2016-05-24T06:56:14.470 回答
0

如果我理解正确，您想避免关闭菜单。

$("div#chart .dropdown-menu li").bind('click',function (e) {
            e.stopPropagation();
        },false);
于 2012-09-07T19:02:48.540 回答