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 
$("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 に答える
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 に答える
0

私が正しく理解していれば、メニューを閉じるのは避けたいと思います。

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