我正在制作一个简单的jQuery导航系统,但我远非专家,因为下面的代码可能会演示。
HTML: <ul id="main-nav">
<li><a href="../" id="home">HOME</a></li>
<li class="pipe">|</li>
<li id="about">ABOUT US</li>
<li class="pipe">|</li>
<li id="projects">PROJECT TYPES</li>
<li class="pipe">|</li>
<li id="reducing">REDUCING EMISSIONS</li>
<li class="pipe">|</li>
<li id="carbon">CARBON MARKETS</li>
<li class="pipe">|</li>
<li id="FAQs">FAQs</li>
</ul>
jQuery: $(function () {
$("#main-nav li:not('.pipe')").hover(function () {
var $this = $(this).attr("id");
$('#nav-strip2 ul.sub-nav').hide();
$("#nav-" + $this).show();
});
});
显示/隐藏工作得很好,唯一的问题是当管道悬停在它隐藏一切。有一个原因,菜单需要在<li>
s组成,不能只是<a>
s,但它不是真的相关和长。
我试图在这里排除。hover()的东西发生时,它是一个带有。pipe类的li,但没有乐趣。我做错了什么?感谢任何帮助。我确信有一种方法可以排除没有附加ID的<li>
s,这将节省将.pipe类分配给所有这些<li>
s。唉,我还没有jQuery的能力来解决这个问题!
谢谢。
当使用:not()
作为选择器时,不要在其括号内使用引号:
$("#main-nav li:not(.pipe)")
try this:
$(function () {
$("#main-nav li").not('.pipe').mouseenter(function () {
$('#nav-strip2 ul.sub-nav').hide();
$("#nav-" + this.id).show();
});
});