Question

我有一个二级菜单，可以在悬停时在桌面上完美运行，在主菜单项上没有悬停时隐藏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：Fiddle

Answer 1

这是因为移动设备没有点击次数。尝试绑定“touchstart”事件以使移动设备正常工作。

像这样：

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

Answer 2

如果您使用的是jqm，请尝试为您的移动应用或移动网络点击活动即

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

我刚刚修改了你的活动。你可以使用this文档中的标准jqm事件来提高性能。

（文件）.click不要在移动设备上隐藏div

2 个答案: