除目标父元素外的所有其他元素中的 removeClass

Question

我正在尝试从一个简单的嵌套列表构建一个简单的下拉菜单。

我想做两件事：

• 当一个链接被点击时，toggleClass 它的父 li 带有 '.open'
• 当用户点击上述以外的任何地方时，从所有 li 中删除 '.open' 类

HTML 应该如下所示：

<ul>
   <li class="parent-item">
      <a href="#">Link</a>
      <ul>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
      </ul>
   </li>
   <li><a href="#">Link</a></li>
   <li class="parent-item">
      <a href="#">Link</a>
      <ul>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
      </ul>
   </li>
</ul>

jQuery 看起来像这样：

$('html').click(function(e) {
      $('.parent-item').removeClass('open');    
      if($(e.target).parent().hasClass('parent-item')) {
         e.preventDefault();
         $(e.target).parent().toggleClass('open');
      }     
});

removeClass 线干扰了 toggleClass 线，阻止了 toggleClass 在第二次点击时触发。

Here is a fiddle

任何想法我做错了什么？

Answer 1

我相信它可以更简单一些，因为您只想在点击位于.parent-item 内时执行任何操作：

// The second argument means we only get called if the click
// travels through a .parent-item en route to the HTML element
$('html').on("click", ".parent-item", function(e) {
  // Don't follow the link
  e.preventDefault();

  // Toggle 'open' on this .parent-item
  $(this).toggleClass('open');

  // Remove it from any *other* .parent-item that has it
  $('.parent-item.open').not(this).removeClass('open');
  // Ignores this one --^^^^^^^^^^
});

实例：

// The second argument means we only get called if the click
// travels through a .parent-item en route to the HTML element
$('html').on("click", ".parent-item", function(e) {
  // Don't follow the link
  e.preventDefault();

  // Toggle 'open' on this .parent-item
  $(this).toggleClass('open');

  // Remove it from any *other* .parent-item that has it
  $('.parent-item.open').not(this).removeClass('open');
});

.open {
  background-color: yellow;
}

<ul>
   <li class="parent-item">
      <a href="#">Link</a>
      <ul>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
      </ul>
   </li>
   <li><a href="#">Link</a></li>
   <li class="parent-item">
      <a href="#">Link</a>
      <ul>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
      </ul>
   </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

您在 cmets 中说过，您希望在任何.parent-item 之外单击 以关闭任何打开的。为此，我们稍作调整，返回未过滤的 html 点击处理程序：

// The second argument means we only get called if the click
// travels through a .parent-item en route to the HTML element
$('html').on("click", function(e) {
  // If this click came through a parent item, get it
  var parentItem = $(e.target).closest(".parent-item");

  // Remove 'open' from any *other* .parent-item that has it
  $('.parent-item.open').not(parentItem).removeClass('open');

  // Was this click on a .parent-item?
  if (parentItem.length) {
    // Don't follow the link
    e.preventDefault();

    // Toggle 'open' on this .parent-item
    parentItem.toggleClass('open');
  }
});

实例：

// The second argument means we only get called if the click
// travels through a .parent-item en route to the HTML element
$('html').on("click", function(e) {
  // If this click came through a parent item, get it
  var parentItem = $(e.target).closest(".parent-item");
  
  // Remove 'open' from any *other* .parent-item that has it
  $('.parent-item.open').not(parentItem).removeClass('open');
  
  // Was this click on a .parent-item?
  if (parentItem.length) {
    // Don't follow the link
    e.preventDefault();

    // Toggle 'open' on this .parent-item
    parentItem.toggleClass('open');
  }
});

.open {
  background-color: yellow;
}

<ul>
   <li class="parent-item">
      <a href="#">Link</a>
      <ul>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
      </ul>
   </li>
   <li><a href="#">Link</a></li>
   <li class="parent-item">
      <a href="#">Link</a>
      <ul>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
         <li><a href="#">Child</a></li>
      </ul>
   </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

您可以将移除类移到底部并排除当前项目

$('html').click(function(e) {
  var $curr;
  if ($(e.target).parent().hasClass('parent-item')) {
    e.preventDefault();
    $curr = $(e.target).parent().toggleClass('open');
  }
  $('.parent-item.open').not($curr).removeClass('open');
});

.parent-item > ul {
  display: none;
}
.parent-item.open > ul {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="parent-item">
    <a href="#">Link</a>
    <ul>
      <li><a href="#">Child</a>
      </li>
      <li><a href="#">Child</a>
      </li>
      <li><a href="#">Child</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Link</a>
  </li>
  <li class="parent-item">
    <a href="#">Link</a>
    <ul>
      <li><a href="#">Child</a>
      </li>
      <li><a href="#">Child</a>
      </li>
      <li><a href="#">Child</a>
      </li>
    </ul>
  </li>
</ul>