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 stackoverflow.com/questions/12299098/… — optimisticupdate
– optimisticupdate, Commented Mar 24, 2013 at 19:54

Taha Paksu · Accepted Answer · 2013-03-24 20:30:09Z

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, 2013 at 20:30

answered Mar 24, 2013 at 20:02

Taha Paksu

15.6k2 gold badges50 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

user1741348 Over a year ago

Thanks for your feedback. I've tried your example but no luck unfortunately. See modified example: youmeusdesign.co.uk/menu_test2

Taha Paksu Over a year ago

Modified this code again and provided a jsfiddle. try it again.

Taha Paksu Over a year ago

I've modified that recently. this code is a previous version.

user1741348 Over a year ago

Thanks for your continued support but I still can't get it working. Getting no response when I click on the menu. youmeusdesign.co.uk/menu_test4

Taha Paksu Over a year ago

I thought you wanted hover on mouse enabled devices and tab on mobile devices?

|

Community · Accepted Answer · 2017-05-23 12:26:12Z

0

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.

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Mar 24, 2013 at 20:01

awbergs

9524 silver badges15 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2013-03-24 20:24:45Z

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, 2013 at 20:24

answered Mar 24, 2013 at 19:55

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

4 Comments

optimisticupdate Over a year ago

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.

Roko C. Buljan Over a year ago

click has some delay on touch devices, but yes. Will work here and there.

user1741348 Over a year ago

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 youmeusdesign.co.uk/menu_test3

user1741348 Over a year ago

Sorry not sure what you mean by dynamically populating the drop down.

Collectives™ on Stack Overflow

Replace hover event with click in JQuery

3 Answers 3

12 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related