Question

Answer 1

通过页面源的快速查看，我找到了处理悬停事件的jQuery代码：

$("ul#topnav li").hover(function() { //Hover over event on list item
    $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
    $(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    $(this).find("span").hide(); //Hide the subnav
});

如果你希望subnav bar在点击之后保持可见，或者只是在'hover out'函数中创建一个if（）语句来检查是否有点击过的东西，即

} , function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    if(subnavclick==0){
        $(this).find("span").hide(); //Hide the subnav
    }
});

在你的subnav .click（）函数中添加subnavclick变量的设置，如下所示：

 $("span").click(function(){
   subnavclick==1;
   //do other stuff
 });

这对你有用....

Answer 2

尝试更改

    $("ul#topnav li").hover(function() { //Hover over event on list item
      $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
      $(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
      $(this).css({ 'background' : 'none'}); //Ditch the background
      $(this).find("span").hide(); //Hide the subnav
    });

到

    $("ul#topnav li").click(function() { //Hover over event on list item
      $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
      $(this).find("span").show(); //Show the subnav
}

Answer 3

现在不应该像脚本中所述那样对鼠标悬停事件产生影响，而应该让它在the click event上运行。

Answer 4

大多数js代码都是冗余的，因为无论如何都是由css提供的。只需添加一个“clicked”类，它模仿li的悬停伪类，并在点击时添加和删除它。

http://jsfiddle.net/VirusZ/THYsK/

此外，您必须更新z-indices，以便即使点击的元素可见，子菜单也会悬停显示。

Answer 5

要概括，您需要在CSS文件和JS中执行此操作。您需要找到ul#topnav li:hover{...}并将其克隆为ul#topnav li.active{...}之类的内容。这是我们将应用于当前所选菜单项的类。

ul#topnav li.current{
    background: #f00 url(topnav_current.gif) repeat-x;
}

从那里，它将取决于您的网站的确切工作方式。每个选项卡是否会将您带到新页面，或者单击选项卡会触发ajax检索？

如果你正在使用AJAX，你可以捕获LI的点击事件来设置一个类。（LIVE DEMO）。如果您在每次点击时都使用新页面，则需要让JS解析网址并使用$(item).addClass('current');

设置正确的项目类

我希望单击时顶部标签保持打开状态

5 个答案: