Question

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

我想做两件事：

点击链接时，使用＆＃39; .open＆＃39;
删除＆＃39;。打开＆＃39;当用户点击上述

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>

您在评论中说过，您希望点击任何.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>

除了目标父

2 个答案: