Twitter引导程序在下拉列表中停止传播

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Twitter引导程序在下拉列表中停止传播相关的知识,希望对你有一定的参考价值。

我在插件jOrgChart的div中有一个twitter bootstrap下拉列表。

我遇到的问题是,当我单击按钮打开下拉菜单时,它还会触发父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开始小提琴)

答案
$("#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


I had to add the drop down menu items to the click handler to keep the behavior constant.
另一答案

尝试这样的事情:

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

另一答案

我用了

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

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

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

你应该使用它,因为上面的解决方案不会关闭焦点输出的下拉列表。

另一答案

如果我理解正确,你想避免关闭菜单。

$("div#chart .dropdown-menu li").bind('click',function (e) {
            e.stopPropagation();
        },false);
另一答案

基于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());
});​

以上是关于Twitter引导程序在下拉列表中停止传播的主要内容,如果未能解决你的问题,请参考以下文章

Firefox 浏览器的 Twitter 引导程序中不显示下拉箭头

下拉列表中的选项卡-twitter bootstrap

如何在 twitter 引导下拉菜单中使用悬停图像

Twitter 引导拆分下拉菜单

引导按钮下拉菜单中的引导日期选择器

Twitter引导导航栏和下拉菜单-不调整大小