0

ホバー時にデスクトップで完全に機能する第2レベルのメニューがあり、メインメニュー項目にホバーがないときにdivを非表示にします。

したがって、モバイル/タッチデバイスの場合、ドロップダウンから離れてクリックして閉じる必要がありますが、私が試みているのはULを非表示にすることではなく、デスクトップをクリックしても、ホバーにドロップダウンULが表示されなくなりました

ここにhtmlがあります

<body>
    <div id="top">
            <div id="menu" class="wrap">
                <ul id="nav">
                    <li><a href="#">My Lists</a>
                        <ul class="drop">
                            <li><a href="#">List 1</a></li>
                            <li><a href="#">List 2</a></li>
                            <li><a href="#">List 3</a></li>
                            <li><a href="#">View all Lists</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Following</a>
                        <ul class="drop">
                            <li><a href="#">Follow 1</a></li>
                            <li><a href="#">Follow 2</a></li>
                            <li><a href="#">Follow 3</a></li>
                            <li><a href="#">View all Follows</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
</body>

そして、JQUERY

        $(document).click(function() {
        $('.drop').hide();
    });
    $(".drop, #nav").click(function(e) {
        e.stopPropagation();
        return false;
    });

これはフィドルです。この方法に加えて、すべての css を使用すると簡単に表示できます。フィドル

4

2 に答える 2

1

これは、モバイル デバイスにはクリックがないためです。モバイルデバイスが機能するように「touchstart」イベントをバインドしてみてください。

そのようです：

$(document).on("click touchstart", function() {
    $('.drop').hide();
});
$(".drop, #nav").on("click touchstart", function(e) {
    e.stopPropagation();
    return false;
});
于 2012-12-12T08:02:24.180 に答える
0

jqm を使用している場合は、モバイル アプリまたはモバイル Web の vclick イベントを試してください。

$(document).vclick(function() {
        $('.drop').hide();
    });
    $(".drop, #nav").vclick(function(e) {
        e.stopPropagation();
        return false;
    });

私はあなたのイベントを単独で変更しました。パフォーマンスを向上させるには、このドキュメントの標準の jqm イベントを使用する必要があるかもしれません。

于 2012-12-14T08:30:51.680 に答える