-2

jQueryで関数を「元に戻す」方法はありますか？説明させてください。selecthtmlタグを正確に再現する関数があります。選択タグでご存知のように、リストアイテムをクリックすると、そのアイテムが選択されます。選択タグの外側をクリックすると、ドロップダウンリスト全体が閉じます。選択は正常に機能しますが、終了は機能しません。これはevent.stopPropagation()イベントオブジェクトで機能しますが、機能しません。これに対する他の解決策はありますか？

デモ： http： //jsfiddle.net/cmAtc/

4

2 に答える 2

1

JavaScript：

$('.list .item').click(function(event) {
    event.stopPropagation();
    var item = $(this);
    var list = item.parent();
    var items = list.children();
    if (list.data("closed")) {
        closeAll();
        list.data("closed", false);
        items.show();   
    } else {
        list.data("closed", true);
        items.removeClass("selected");   
        item.addClass("selected");
        items.not(".selected").hide();
    }
});

$(document).click(function() {
    closeAll();
});

function closeAll() {
    $(".list .item:not(.selected)").hide();
    $(".list").data("closed", true);
}

HTML：

<ul class="list" data-closed="true">
    <li class="item selected" style="display:list-item;">Item 1</li>
    <li class="item" style="display: none;">Item 2</li>
    <li class="item" style="display: none;">Item 3</li>
</ul>
<ul class="list" data-closed="true">
    <li class="item selected" style="display:list-item;">Item 1</li>
    <li class="item" style="display: none;">Item 2</li>
    <li class="item" style="display: none;">Item 3</li>
</ul>

CSS：

.list {list-style: none; border: 1px solid red; width: 200px; margin-bottom: 20px;}
.item {display: none; cursor: pointer;}
.item:hover {background: yellow;}
.item.selected {background: green;}

デモ： http： //jsfiddle.net/MZhyx/4/

于 2013-01-28T14:41:02.437 に答える
1

jQueryにネイティブに組み込まれている、あなたが求めているもののようなものは本当にありません。あなたは自分でそれをしなければなりません。

私の提案は、ドキュメントにバインドすることです。

$(document).on('click', function () {
    $(".dropdownlist li").parent().children(":not(.selected)").hide();
});

stopPropagationリストをクリックしたときにもこれがトリガーされないようにするためのがすでにあります。

http://jsfiddle.net/cmAtc/1/

于 2013-01-28T14:22:55.480 に答える