:not() 以各种形式不起作用

Question

我正在制作一个简单的 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 的能力来解决这个问题！

谢谢。

Answer 1

使用:not() as a selector时，不要在括号内使用引号：

$("#main-nav li:not(.pipe)")

Answer 2

试试这个：

$(function () {
    $("#main-nav li").not('.pipe').mouseenter(function () {
        $('#nav-strip2 ul.sub-nav').hide();
        $("#nav-" + this.id).show();
    });
});