Can we use same jquery functionality twice once on hover and another on click?

Question

I have main menu which contain 6 element or main categories - when we hover over these main menus then we can see their sub menus or categories.

http://newiagadvisors.advisorproducts.com/home

My Requirement is like this way:

it’s possible to have the sub-menus or categories appear as choices when someone clicks on the pictures as well - in the same way while hovering over main menu we see their sub categories or menus?

I want same menu hover functionality on click event when someone click on picture

Below is the jquery code for main menu dropdown on hover event:

$(function()
{
    $("ul.dropdown li").hover(function()
    {
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function()
    {
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");
});

Yes you can, why not give it a go! $('img').click(function(){ do stuff }); - http://api.jquery.com/click/ — Wez
– Wez, Commented Oct 29, 2012 at 10:48
But how do you envision it to work? On click you show the sub menus but then when do they disappear? On the second click? — CyberDude
– CyberDude, Commented Oct 29, 2012 at 10:58
If we give this same functionality on click event for image then how can we link or show the same submenu appears on click? — Sushil Raghav
– Sushil Raghav, Commented Oct 29, 2012 at 11:01

webdeveloper · Accepted Answer · 2012-10-29 11:20:49Z

1

Try something like this:

var images = $('#banner img'),
    menuItems = $('.dropdown.sub-menu > li');

images.click(function(){
    var index = images.index(this);

    var li = menuItems.eq(index),
        sublist = li.find('ul:first');

    if(sublist.length)
    {
        li.addClass("hover");
        sublist.css('visibility', 'visible').show();
    }
});

answered Oct 29, 2012 at 11:20

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

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

2 Comments

Sushil Raghav Over a year ago

I tried your code and it works but the only thing is left - when we move our mouse out of that box then it hides the subnav - can it be possible to show sub nav until user can click outside ?

webdeveloper Over a year ago

@SushilRaghav $("ul.dropdown li").hover hide it, you can add variable to detect how submenu was opened and do not allow to hide it.

Satish Bellapu · Accepted Answer · 2012-10-29 10:52:15Z

0

You can add the same function for different Even listeners there will not be any problem.

answered Oct 29, 2012 at 10:52

Satish Bellapu

7401 gold badge6 silver badges15 bronze badges

Comments

RRikesh · Accepted Answer · 2012-10-29 11:02:28Z

0

Use bind(), however bind isn't compatible with hover, so you can use mouseenter and mouseleave instead. Note that hover is a shortcut for those two handlers.

  $("ul.dropdown li").bind( {
        'mouseenter' : function(){
          $(this).addClass("hover");
          $('ul:first',this).css('visibility', 'visible');
        }, 
        'mouseleave': function()
        {
          $(this).removeClass("hover");
          $('ul:first',this).css('visibility', 'hidden');
        },
        'click': function()
        {
          if( $(this).hasClass("hover") ){
            $(this).removeClass("hover");
            $('ul:first',this).css('visibility', 'hidden');
          } else {
            $(this).addClass("hover");
            $('ul:first',this).css('visibility', 'visible');
          }
        }
      });

answered Oct 29, 2012 at 11:02

RRikesh

14.5k5 gold badges55 silver badges74 bronze badges

1 Comment

Sushil Raghav Over a year ago

Thanks for your reply dude - it make so many thing clear to me in jquery :)

st3inn · Accepted Answer · 2012-10-29 16:09:01Z

0

Bind the navigation li with on mouseenter and on mouseleave (that is what the hover() is doing behind the scenes anyway):

$("ul.dropdown li").on('mouseenter', function() {
    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');
}).on('mouseleave', function() {
    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');
});

Then you will have to connect the two somehow (ie. the img and the navigation li), let's say you have an id attribute on both, the li for instance having id="news-info" and the corresponding picture (the img tag) having id="img-news-info. Then you can bind the click of the picture with:

$("#banner img").on('click', function() {
    var navId = $(this).attr('id').substring(4);
    $("#"+navId+"").mouseenter();
});

edited Oct 29, 2012 at 16:09

answered Oct 29, 2012 at 11:25

st3inn

1,5961 gold badge9 silver badges18 bronze badges

2 Comments

st3inn Over a year ago

I don't think you even need to do the first part (splitting the hover function) for the mouseenter trigger to work, but it helps with readability in my opinion.

st3inn Over a year ago

Not a problem. webdeveloper's implementation is pretty nifty, though, binding with the indexes, meaning no html modification neccessary.

Collectives™ on Stack Overflow

Can we use same jquery functionality twice once on hover and another on click?

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related