Question

我希望在再次点击父级时隐藏孩子，而不是在点击孩子时隐藏孩子。出于某种原因，孩子被视为$ level1元素，而我期望他们不要回复$ level1.click函数。我想我错过了一些微不足道的东西，但我无法自拔。在这里你是filddle https://jsfiddle.net/bxmbtzrb/3 谢谢你的建议。

结构

<nav>
      <ul>
        <li>
          <a>PARENT</a>
          <ul>
            <li>
              <a href="#">CHILD 1</a>
            </li>
            <li>
              <a href="#">CHILD 2</a>
            </li>
            <li>
              <a href="#">CHILD 3</a>
            </li>
          </ul>
        </li>
      </ul>

Jquery脚本：

var $level1 =$('nav').children('ul').children('li');
  $level1.click(function() {
    if ($(this).hasClass('on')) {
      $(this).removeClass('on');
    } else {
      $level1.filter('.on').removeClass('on');
      $(this).addClass('on');
    }
  });
    nav li:not(.on) li {
      display: none;
    }

和CSS：

nav li:not(.on) li {
  display: none;
}

Answer 1

您的$level1选择器，包含您的第一个列表中的所有内容，包括子项，这就是孩子们在点击后也会隐藏的原因。

我建议在父级上使用id并将其用作选择器。如果你不能这样做，那么选择第一个子链接：

var $level1 =$('nav > ul > li > a:first-child');
var children =$('nav > ul > li');
$level1.click(function() {
  $(children).toggleClass('on');
});

nav li:not(.on) li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      <a>PARENT</a>
      <ul>
        <li>
          <a href="#">CHILD 1</a>
        </li>
        <li>
          <a href="#">CHILD 2</a>
        </li>
        <li>
          <a href="#">CHILD 3</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer 2

首先，由于你的jQuery选择器，你的孩子被视为'$ level1'元素：var $level1 =$('nav').children('ul').children('li'); - ＆gt;点击您选择的“li”及其所有孩子，即可触发您的活动。

您可以使用技巧来检查是否是触发事件的父级（How to have click event ONLY fire on parent DIV, not children?），但我建议您采用其他方式来执行您想要的操作。

//You get your parent 'li' element
var list = $('nav').children('ul').children('li');
//You get your 'a' element, the one who have to fire the event
var $level1 = list.children('a');

//Init the event
$level1.click(function() {
    //Add or Remove the 'on' class of the parent list
    list.toggleClass('on');
});

你在这里更新了你的小提琴：https://jsfiddle.net/bxmbtzrb/25/

在Jquery中，为什么孩子会对父母的功能做出反应？

2 个答案: