2

我有一个带有下拉菜单的导航，在计算机浏览器上，它出现在悬停（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);
    }); 

});

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

谢谢您的帮助！

4

2 回答 2

2

如果您使用 jq 1.7+，请在此处尝试此演示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');
    });       
})
于 2012-06-08T13:38:40.197 回答
0

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

例如

$('body').on('click', ':not(#generale > li)', function(){
    // close it here
});
于 2012-06-08T13:22:39.423 回答