web-dev-qa-db-ja.com

Twitter bootstrapドロップダウンが開いたら伝播を停止する

プラグイン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に感謝）

javascriptjquerytwitter-bootstrapjquery-events
27
Escobar5
$("#orgchart").jOrgChart({ chartElement: '#chart' });

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

伝播を停止して切り替えます。 例

16
Joe

次のようなものを試してください：

$("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を返す代わりに。

4
Sebastian.Belczyk

ジョーの答えに基づいて、これには次のクリックで閉じるという通常のドロップダウン機能が含まれています。

$("#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());
});​
1
Eric Amshukov

使った

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

これは@Joeの回答に似ていますが、もう少し一般的です

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

上記の解決策はフォーカスアウトのドロップダウンを閉じないので、代わりにこれを使用する必要があります。

1
AvcS

私が正しく理解していれば、メニューを閉じないでください。

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