1

ユーザーがタグ内のパーツをクリックしても、この要素を開くイベントは発生しません。また、別の関数を追加してもClick問題は修正されませんでした。<span>click"#dropdown_box1 span"

更新-テキストhttp://jsfiddle.net/chayacooper/ezxSF/12/をクリックしようとしたときに問題を示すフィドルを作成しました

JS

$(document).ready(function () {
    $("#dropdown_box1").click(function () {
        $("#select1").show();
    });
    var timeoutID;
    $("#select1").mouseleave(function () {
            timeoutID = setTimeout(function () {
                $("#select1").hide();
        }, 800);
    });
        $("#select1").mouseenter(function () {
        clearTimeout(timeoutID);
    });
    $("#dropdown_container1 ul li a").click(function () {
        var text = $(this).find("input").val();
        var text_edited = text.replace(/_/g, " ");
        var currentHtml = $("#dropdown_box1 span").html();
        $("#dropdown_box1 span").html(currentHtml.replace(currentHtml, ''));
        $("#dropdown_box1 span").append(text_edited);
    });
    });

HTML

<div id="dropdown_box1"><span>Select</span></div>
<div class="dropdown_container" id="dropdown_container1">  
    <ul id="select1"> 
        <!-- Several List Item Elements --> 
    </ul>
</div>
4

3 に答える 3

1

ジョードの答えは良いです。要素のクリック時ハンドラーを変更せずにこれを行う方法があるかどうかは気になりました'#dropdown_container1'。

<html>要素のクリック時ハンドラーを次のように変更できます。

$('html').click(function (e) {
    if ($(e.target).is('#dropdown_box1') || ($('#dropdown_box1').has(e.target).length > 0))     {
        $("#select1").show();
    } else {
        $("#select1").hide();
    }
});

そして、あなたは本当にここで行う必要はありません.show()。これは次のように短縮できます。

$('html').click(function (e) {
    if (!$(e.target).is('#dropdown_box1') && ($('#dropdown_box1').has(e.target).length == 0))     {
        $("#select1").hide();
    }
});

isDescendantOf()残念なことに、jQueryには、またはのように、これを読みやすくするメソッドがありませんhasDecendant()。

于 2013-03-03T22:25:06.940 に答える
1

I created a JSFiddle from what you've given, and it seems to work: 

<div id="dropdown_box1"><span>Select</span></div>
<div class="dropdown_container" id="dropdown_container1">  
    <ul id="select1"> 
        <li>Item</li>
    </ul>
</div>

Can you modify it to replicate the problem?

Edit:

Change the click handler from:

$("#dropdown_box1").click(function () {
    $("#select1").show();
});

to:

$("#dropdown_box1").click(function (e) {
    e.stopPropagation();
    $("#select1").show();
});

And now you can also change this:

$('html').click(function (e) {
    if (e.target.id == 'dropdown_box1') {
        $("#select1").show();
    } else {
        $("#select1").hide();
    }
});

To this:

$('html').click(function (e) {
     $("#select1").hide();
});
于 2013-03-03T20:13:32.233 に答える
1

問題は、clickイベントが を呼び出し$("#select1").show();ていることですが、親が非表示の場合、これは何の効果もありません。

代わりに、その要素も非表示になっているかどうかによって、$("#dropdown_container1").show();必要になる場合もあります。$("#select1").show();

編集：

あなたのjsFiddleに基づいて、これは私にとってはうまくいきました：$(".dropdown_container ul li ul").show();

編集2：

私のアプローチdivは、 ではなく をクリックした場合にのみ機能しますspan。これを試して：

ドロップダウン クリック イベントを次のように変更します。

$("#dropdown_box1").click(function () {
    $("#select1").show();
});

ID を指定しspanます。<span id="select_text">Select Text</span>

$('html').clickハンドラを次のように変更します。

$('html').click(function (e) {
    if (e.target.id != 'dropdown_box1' && e.target.id != 'select_text') {
       $("#select1").hide();
    }
});

これにより、 がクリックされたときにメニューがすぐに非表示にならなくなりspanます。以前のハンドラーはselectif the target is notを隠していました。これは、イベントを発生させたのが である場合、ドロップダウン クリック ハンドラーからdropdown_box1実際に否定します。$("#select1").show();span

編集3：

コメントから、@JohnS は の前に以下を配置することを提案しました$("#select1").show();:

$("#select1>li>ul").hide();

これで問題はありませんが、サブメニューがクリックされたときに適用される強調表示が残ります。これは短時間で消え、上記のコードがないとサブメニューも一時的に表示されます (これはコメントで説明した問題だと思います)。

興味深いことに、これは IE 9 では正常に機能しましたが、Chrome では機能しませんでした。これを回避する方法は、単にメニューにマウス クリックを処理させることです。この$('html').click方法は技術的には必要ありません。

これを行う際の問題は、メニュー項目をクリックしてからアイテムが非表示になるまでに遅延があることです。$("#select1").hide();この遅延中の呼び出しが問題の原因のようです。

これを回避するには、 を Edit 2 のままにして、ハンドラーを$("#dropdown_box1").click削除し、を次のように変更します。$('html').click$("#select1").mouseleave

$("#select1").mouseleave(function () {
    $("#select1").hide();
});

これを行うと、メニューがぶらぶらしているという問題を回避できますが、これによる視覚的な効果として、メニューが閉じるのが遅くなります。

于 2013-03-03T20:43:21.843 に答える