javascript - :not() in various guises isn't working

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() 发生的事情，当它是 li 与 .pipe 类时，但没有快乐。我究竟做错了什么？任何帮助表示赞赏。我确定有一种方法可以排除 <li> s 没有附加 ID，这样可以省去将 .pipe 类分配给所有这些 <li>秒。唉，我还没有 jQuery 能力来解决这个问题!

谢谢。

Answer 1

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

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