Twitter bootstrap 在下拉菜单打开时停止传播

Posted 2023-02-24

【中文标题】Twitter bootstrap 在下拉菜单打开时停止传播

【英文标题】：Twitter bootstrap stop propagation on dropdown open

【发布时间】：2012-09-01 15:07:24

【问题描述】：

我在一个带有插件 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 启动小提琴）

【参考方案1】：

试试这样的：

$("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。

【讨论】：

问题是，使用 stopPropagation 我已经停止了事件冒泡，我遇到的问题是现在下拉菜单也不起作用。

我意识到几秒钟前我更新了我的答案。基本思想是检测何时从切换下拉菜单中冒泡的点击事件并相应地完成工作。

这对我不起作用，事件没有新属性。这是一个不同的事件（firefox 和 chrome）。

@Menelaos 尝试使用e.originalEvent.isDropDownToggleEvent（假设您使用的是 jQuery）

@Dunc 谢谢你的回复，如果我能记住这是什么项目，我会按照你的建议去做:)

【参考方案2】：

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

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

停止传播然后切换。 Example

---

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

【讨论】：

jsfiddle.net/UTYma 你能编辑一下吗，因为我不确定你要做什么。

我编辑了它，div#chart 不见了，您现在可以检查下拉菜单是否不起作用

让它与您的编辑一起使用，希望它适合您的解决方案。

此解决方案的一个缺点是，在下拉菜单上调用 toggle() 会丢失您使用原始点击事件处理程序获得的一些功能 - 例如设置通过单击屏幕上的任意位置关闭下拉菜单的功能

恕我直言，@Sebastian.Belczyk 的答案更好，因为它避免了上述缺点。

【参考方案3】：

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

$("div#chart .dropdown-menu li").bind('click',function (e) 
            e.stopPropagation();
        ,false);

【讨论】：

不，我希望菜单正常工作，我只是希望当用户单击按钮打开菜单时，事件不会冒泡（因为包含菜单的 div 也有折叠另一个元素的事件）

要清楚，我正在使用 jOrgChart，并且我在节点内有菜单：dl.dropbox.com/u/4151695/html/jOrgChart/example/example.html

【参考方案4】：

我用过

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

这类似于@Joe 的回答，但更通用一些

【参考方案5】：

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

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

【参考方案6】：

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

$("#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());
);​