选择器：不在 jQuery 中不工作

Question

我有一个 body，ID 为 body，里面有一个 div，ID 为 class nav-container。我想在用户单击 #body 时删除某些 classes，但不删除 .nav-container（这是一种叠加类型的菜单）。

尝试了以下代码

HTML:

<body id="body">
  <div class="nav-container">
    <a href="#" id="close-btn"> X </a>
    <nav class="display">
      <ul>
        <li><a href="#"> One </a></li>
        <li><a href="#"> Two </a></li>
        <li><a href="#"> Three </a></li>
     </ul>
   </nav>
 </div>
</body>

jQuery

$('#body :not(.nav-container)').click(function() {
    $('.cover').removeClass('active-cover');
    $('.nav-container').removeClass('active');
});

虽然它似乎对我不起作用。

Answer 1

第一个元素不应该是父元素，如#body，而是元素。例如 div:not('example') 适用于每个 div 除了示例。

$("div:not(.nav-container)").click(function() {
alert("nav-container was not clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body">
  <div class="nav-container">
    <a href="#" id="close-btn"> X </a>
    <nav class="display">
      <ul>
        <li><a href="#"> One </a></li>
        <li><a href="#"> Two </a></li>
        <li><a href="#"> Three </a></li>
     </ul>
   </nav>
 </div>
  <br />
  <div>click here </div>
</body>

Answer 2

它不会工作，因为 not 排除了通过早期 css 选择器标准的选定元素，因为 .nav-container 不是 #body 选择的列表的一部分（在这种情况下不会作为其 ID 列出），因此您将无法排除它。所以基本上你需要的是

$(document).on("click", "div:not('.nav-container')",function() {
    $('.cover').removeClass('active-cover');
    $('.nav-container').removeClass('active');
});

选择器：不在 jQuery 中不工作

Selector :not in jQuery not working

html

javascript

jquery

jquery-selectors