CODEWITHSUNDEEP
javascriptjquery
Sushil Raghav
Sushil Raghav

Reputation: 253

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

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(" » ");
});

Upvotes: 1

Views: 243

Answers (4)

st3inn
st3inn

Reputation: 1596

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

Upvotes: 0

webdeveloper
webdeveloper

Reputation: 17288

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

Upvotes: 1

RRikesh
RRikesh

Reputation: 14381

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

Upvotes: 0

Satish Bellapu
Satish Bellapu

Reputation: 740

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

Upvotes: 0

Related Questions