1

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

http://newiagadvisors.advisorproducts.com/home

我的要求是这样的：

当有人点击图片时，也可以让子菜单或类别显示为选项 - 就像悬停在主菜单上时我们看到他们的子类别或菜单一样？

当有人单击图片时，我希望单击事件具有相同的菜单悬停功能

以下是悬停事件主菜单下拉菜单的 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(" » ");
});
4

4 回答 4

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();
    }
});
于 2012-10-29T11:20:49.817 回答
0

您可以为不同的监听器添加相同的功能，不会有任何问题。

于 2012-10-29T10:52:15.663 回答
0

使用bind()，但是 bind 与hover不兼容，因此您可以使用mouseenterandmouseleave代替。请注意，悬停是这两个处理程序的快捷方式。

  $("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');
          }
        }
      });
于 2012-10-29T11:02:28.400 回答
0

将导航 li 与 on mouseenter 和 on 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();
});
于 2012-10-29T11:25:00.667 回答