Question

我正在使用以下JQuery代码来控制鼠标悬停时的某些样式元素，以获得下拉菜单解决方案：

$(window).load(function () {

    // On hover show or hide
    $("#menu ul li").hover(function(){
             $(this).children("ul").show();
             $(this).children("ul").css('background-image', 'none');
       },
       function(){
             $(this).children("ul").hide();

    })

    // On hover show or hide
    $("#menu ul ul li, #menu ul ul li a ").hover(function(){
             $(this).css('color', '#666');
       },
       function(){
             $(this).css('color', '#FFF');       
    })

});

参见工作示例：

http://www.youmeusdesign.co.uk/menu_test

我想修改它，以便我可以用点击功能替换悬停功能。当客户端使用不支持悬停功能的触摸界面时。以Windows Phone为例。 iOS工作正常，因为设备已经有一些类来处理悬停事件。

我尝试修改我的脚本，用.click替换.hover，但它不起作用？

e.g。

$("#menu ul li").click(function(){

非常感谢任何帮助。

Answer 1

试试这个:(在此测试：http://jsfiddle.net/d9mPC/）

$("#menu ul li").on("mouseover mouseout tap",function(event){      
    if($(this).children("ul").is(":hidden") && (event.type == "mouseover" || event.type == "tap")){
         $(this).children("ul").show();
         $(this).children("ul").css('background-image', 'none');
   }else if($(this).children("ul").not(":hidden") && (event.type == "mouseout" || event.type == "tap")){
         $(this).children("ul").hide();
   }    
});

// On hover show or hide
$("#menu ul ul li, #menu ul ul li a ").on("mouseover mouseout tap",function(event){        
   if(!$.hasData($(this),"hovered") && (event.type=="mouseover" || event.type=="tap")){
         $(this).css('color', '#666');
         $.data((this),"hovered",true);
   }else if($.hasData((this),"hovered") && (event.type=="mouseout" || event.type=="tap")){
         $(this).css('color', '#FFF');
       $.removeData((this),"hovered");
   }
});

Answer 2

我想修改它，以便我可以用点击功能替换悬停功能。

$("#menu").on('click', 'ul li', function(){
         $("#menu li ul").hide().find('li a').css('color', '#FFF');
         $("ul", this).show().children('li a').css('color', '#666');
});

Answer 3

你可以同时做两件事。

我要做的是允许点击或悬停以显示该项目（跟踪点击状态，以便在悬停打开时不会立即关闭它。）

然后你会做一些事情

您不必嗅探设备
您可以让人们点击切换菜单项

另一种方法是sniff the device为每个设备键入或有条件地加载不同的javascript文件（服务器端的嗅探设备），这可能会导致维护问题。

我建议只为每台设备实施两种设备。

单击JQuery替换悬停事件

3 个答案: