2

順序付けられていない（）HTMLリストを使用していくつかのMultiSelect要素をスタイリングしてい<ul>ます。この関数は、ユーザーが「dropdown_box」または「dropdown_container」以外のドキュメントをクリックしたときに要素を非表示にすることを目的としています。

この関数はタグ内では機能せず<ul>、リスト項目がクリックされるとすぐに要素を非表示にします。との両方のIDを指定しようとしましたが、<div>クリック<ul>するとすぐに閉じます。

更新-問題を示すためにjsfiddleを作成しましたhttp://jsfiddle.net/chayacooper/ezxSF/16/

ほとんどの用途で要素を閉じる別のmouseleave関数がありますが、ユーザーがクリックして要素を開いたが、「UL要素」項目のいずれにもマウスを合わせなかった場合に要素を閉じるには、この機能を追加する必要があります。

JS

$('html').click(function (e) {           
    if (e.target.id == 'dropdown_box' || e.target.id == 'dropdown_container') {
        $("#select_colors").show();
    } else {
        $("#select_colors").hide();
    }
});

HTML

<div id="dropdown_box">Select</div>
<div id="dropdown_container"> 
    <ul id="select_colors"> 
        <!-- Several List Item Elements --> 
    </ul>
</div>
4

2 に答える 2

2

私はこれを別の方法で行います。divを非表示にするグローバルクリックハンドラーを「body」にアタッチし、イベントの伝播を停止するdropdown_boxとdropdown_containerにクリックハンドラーをアタッチします（falseを返し、e.stopPropagationを呼び出します）。このように、bodyイベントハンドラーはイベントを認識しません。

$('html').click(function () {$('#select_colors').hide(); });
$('#dropdown_box, #dropdown_container').click(function (e) {
    e.stopPropagation();
    return false;
});

UPDATE は本文をhtmlに変更し、dropdown_containerの代わりに「select_colors」を非表示にしました。

http://jsfiddle.net/KJmtG/

いくつかの参考文献：

http://www.quirksmode.org/js/events_order.html

Javascriptでのイベント伝播

于 2013-03-08T03:00:04.107 に答える
2

これを試して：

$('html').click(function () {
    $("#select_colors").hide();
});
$('#dropdown_box, #dropdown_container').click(function (e) {
    e.stopPropagation();
    $("#select_colors").show();
});

jsFiddleの例

HTMLをクリックするとリストが非表示になり、＃dropdown_boxまたは#dropdown_containerをクリックするとリストが表示され、イベントのバブリングが停止します。

于 2013-03-08T03:38:51.357 に答える