0

我有一个二级菜单，它在悬停时完美地在桌面上运行，当没有悬停在主菜单项上时隐藏 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，请为您的移动应用程序或移动网络尝试 vclick 事件，即

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

我刚刚单独修改了您的事件。也许您必须使用本文档中的标准 jqm 事件以获得更好的性能。

于 2012-12-14T08:30:51.680 回答