Replace hover event with click in JQuery

Question

I'm using the following JQuery code to control some style elements on mouse hover for a drop down menu solution:

$(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');       
    })

});

See working example:

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

I would like to modify this so that I can replace the hover function with a click function. When the client is using a touch interface that does not support the hover functionality. Windows Phone for example. iOS works ok as the device already has some classes to handle hover events.

I've tried modifying my script replacing the .hover with .click but it does not work?

e.g.

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

Any help would be most appreciated.

In my opinion there is no other way to detect first if it is a mobile touch device an then set up the menue function. Look here for more information detecting devices http://stackoverflow.com/questions/12299098/what-is-the-most-reliable-way-to-detect-a-mobile-device-using-modernizr — hyde, Mar 24 '13 at 19:54

Taha Paksu · Answer 1 · 2013-03-24T20:30:09.293

1

try this one: (tested here: 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");
   }
});

edited Mar 24 '13 at 20:30

answered Mar 24 '13 at 20:02

Taha Paksu

14,293
1
39
67

Thanks for your feedback. I've tried your example but no luck unfortunately. See modified example: http://www.youmeusdesign.co.uk/menu_test2 – user1741348 Mar 24 '13 at 20:09
Modified this code again and provided a jsfiddle. try it again. – Taha Paksu Mar 24 '13 at 20:31
I've modified that recently. this code is a previous version. – Taha Paksu Mar 24 '13 at 20:34
Thanks for your continued support but I still can't get it working. Getting no response when I click on the menu. http://www.youmeusdesign.co.uk/menu_test4 – user1741348 Mar 24 '13 at 20:42
I thought you wanted hover on mouse enabled devices and tab on mobile devices? – Taha Paksu Mar 24 '13 at 20:43
Yes. Have tried your example on desktop (mouse enabled) and both iOS and Windows Phone (touch devices) but not working. – user1741348 Mar 24 '13 at 20:49
your error is something else there. it says: `Viewport argument value "device-width;" for key "width" is invalid, and has been ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated.` – Taha Paksu Mar 24 '13 at 20:51
Many thanks. Have removed all unrelated code to rule out any conflicts including the viewport argument. see updated example: http://www.youmeusdesign.co.uk/menu_test5 Really appreciate your support but this one is driving me crazy. Still can't get it working on mouse hover and touch. – user1741348 Mar 24 '13 at 21:15
Hover works on desktop with mouse, but no luck with touch. Have tested on iOS and Windows Phone and both do not respond to touch. – user1741348 Mar 24 '13 at 21:27
try playing with the "tap" effect. change it with "touch" or something. don't forget the inner if's. – Taha Paksu Mar 24 '13 at 22:02
and don't forget to include jquery mobile. maybe that's the reason that mobile events are not working. – Taha Paksu Mar 24 '13 at 22:06
Have been playing with "touch" and "click" effects and think i'm getting some ware. Thank you so much for your support. – user1741348 Mar 24 '13 at 22:46

Roko C. Buljan · Answer 2 · 2013-03-24T20:24:45.950

0

I would like to modify this so that I can replace the hover function with a click function.

$("#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');
});

edited Mar 24 '13 at 20:24

answered Mar 24 '13 at 19:55

Roko C. Buljan

164,703
32
260
278

With this workaround the click function will be also available for non-touch users, right? If this doesn't matters this will work of course without detecting devices first. – hyde Mar 24 '13 at 20:03
`click` has some delay on touch devices, but yes. Will work here and there. – Roko C. Buljan Mar 24 '13 at 20:04
Thanks yes it could be implemented to work on both touch and non touch users. I've tried your solution and the drop down menu opens on click but I'm unable to click on any sub-menu items. See example http://www.youmeusdesign.co.uk/menu_test3 – user1741348 Mar 24 '13 at 20:17
Sorry not sure what you mean by dynamically populating the drop down. – user1741348 Mar 24 '13 at 20:26

score 0 · Answer 3 · edited May 23 '17 at 12:26

You can probably do both at the same time.

What I would do is allow a click or hover to show the item (track a click state so that you aren't closing it immediately when hover opens it).

Then you will do achieve a few things

You won't have to sniff the device
You will give people the ability to click toggle a menu item

The alternative is to either sniff the device type or conditionally load different javascript files for each device (sniff device on the server side) which could lead to maintenance headaches.

I would recommend just implementing both for every device.

Replace hover event with click in JQuery

3 Answers3