Question

我有一个带有下拉菜单的导航，在计算机浏览器上显示悬停（效果的CSS3 / jQuery），当它悬停时，它会消失。虽然，它还会检测用户是否在iPad / iPhone上，如果是，则仅在用户单击菜单项时显示下拉列表。因此，假设我有一个“服务”导航菜单，在计算机上，服务子菜单将在悬停时显示，并在移动设备上点击。

虽然在手机上，除非用户点击页面上的其他菜单项/链接，否则菜单不会关闭。我想要的是当用户点击页面上的其他地方时菜单消失，甚至当他向下滚动页面时更好。（如果有更好的方法，请告诉我）

所以是的，这是我的实际代码（适用于移动设备）

$("#generale > li").click(function(){
    $('ul:first',this).css("display", "block");

    // Hover that needs to be changed 
    $("#generale > li").hover(function(){}, 
    function(){
        $('ul:first',this).fadeOut(200);
    }); 

});

基本上它仍会检查悬停，但这是我需要更好的解决方案，因为没有悬停在移动设备上。

感谢您的帮助！

Answer 1

如果你使用jq 1.7+，那么试试这个DEMO HER http://jsfiddle.net/SCN5T/3/

$(function(){
    $(document).mousedown(function(){
         $('.dropdown .active').removeClass('active').children('ul').hide();
    })
    $('.dropdown').on('mousedown','.subMenu', function(e){
        e.stopPropagation();
        var elem = $(this);
        if(elem.is('.active')) {
            elem.children('ul').slideUp(150);
            elem.removeClass('active');
        } else {
             $('.dropdown .active').removeClass('active').children('ul').hide();
            elem.addClass('active').children('ul').slideDown(150);
        }
    });
    $('.subMenu').on('mousedown','ul', function(e){
        e.stopPropagation();
        alert('menu item clicked');
    });       
})

Answer 2

您可以使用jquery的on()函数来执行此操作。

e.g。

$('body').on('click', ':not(#generale > li)', function(){
    // close it here
});

检测单击页面以删除下拉菜单

2 个答案: