0

我正在使用以下 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 电话为例。iOS 工作正常，因为设备已经有一些类来处理悬停事件。

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

例如

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

非常感激任何的帮助。

4

3 回答 3

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");
   }
});
于 2013-03-24T20:02:25.447 回答
0

你可能可以同时做这两个。

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

然后你会做一些事情

  • 您不必嗅探设备
  • 您将使人们能够单击切换菜单项

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

我建议只为每台设备实现两者。

于 2013-03-24T20:01:22.830 回答
0

我想对此进行修改，以便可以用单击功能替换悬停功能。

$("#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');
});
于 2013-03-24T19:55:14.723 回答