单击JQuery替换悬停事件

时间:2013-03-24 19:48:45

标签: jquery function onclick click hover

我正在使用以下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(){

非常感谢任何帮助。

3 个答案:

答案 0 :(得分: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");
   }
});

答案 1 :(得分: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');
});

答案 2 :(得分:0)

你可以同时做两件事。

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

然后你会做一些事情

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

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

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