我想有点击时

Question

您好我现在用在这里发现了这个菜单上的顶级制表住宿：我有 http://www.sohtanaka.com/web-design/examples/horizontal-subnav/

问题是，我想有顶部导航逗留点击后和展示也潜艇。我希望任何人都可以帮助我！

加载新页面时Top Nav应仍处于活动状态。我知道如何做到这一点的服务器端而不是客户端用JS/jQuery的

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栏保持可见点击或某事之后刚刚创建，检查是否有什么东西被点击了“悬停出”功能在if（）语句，即

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

而且你subnav。点击内（）功能添加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提供的。只需添加一个模拟li的悬浮伪类的“单击”类，然后单击添加并删除它。

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

也让子菜单上悬停甚至出现可见一个点击的元素，你必须更新z折射率。

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解析URL并设置正确的项目类使用$(item).addClass('current');