Question

我有主菜单，其中包含6个元素或主要类别 - 当我们将鼠标悬停在这些主菜单上时，我们可以看到它们的子菜单或类别。

http://newiagadvisors.advisorproducts.com/home

我的要求是这样的：

当某人点击时，可以将子菜单或类别显示为选项 - 同时悬停 strong>在主菜单上我们看到他们的子类别或菜单？

当有人点击图片

时，我想在点击事件上使用相同的菜单悬停功能

下面是悬停事件主菜单下拉列表的jquery代码：

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

Answer 1

尝试这样的事情：

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

Answer 2

您可以为不同的Even听众添加相同的功能，不会出现任何问题。

Answer 3

使用bind()，但绑定与hover不兼容，因此您可以改为使用mouseenter和mouseleave。请注意，悬停是这两个处理程序的快捷方式。

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

Answer 4

将导航li绑定在mouseenter和mouseleave上（这就是hover（）在幕后做的事情）：

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

然后你必须以某种方式连接这两个（即img和导航li），假设你有两个id属性，li例如id="news-info" }和相应的图片（img标记）id="img-news-info。然后你可以用图片点击图片：

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

我们可以在悬停时使用两次相同的jquery功能吗？

4 个答案: