用于li li的jQuery选择器

Question

我创建了一个菜单＆amp;想要点击li children child child set .active class no li parent

（在enfold WordPress主题中使用）

$('#mobile-advanced li.menu-item-has-children').on('click', function () {
   $(this).toggleClass('active');
});

// just for test
$('a').on('click', function (e) {
    e.preventDefault() ;
});

li.active{
  background-color: #FFB94B;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="mobile-advanced">
  <li class="menu-item menu-item-has-children">
    <a href="">T 1</a>
    <ul>
      <li class="menu-item menu-item-has-children">
        <a href="">T11</a>
        <ul>
          <li class="menu-item"><a href="">T111</a></li>
          <li class="menu-item"><a href="">T112</a></li>
        </ul>
      </li>
      <li class="menu-item"><a href="">T12</a></li>
      <li class="menu-item"><a href="">T13</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a href="">T 2</a>
  </li>
</ul>

例如，当我点击li children li parent设置活动类时

Answer 1

您可以使用onDataChange标记检测事件click：

a

$('#mobile-advanced li.menu-item-has-children a').on('click', function () {
   $(this).parent().toggleClass('active');
});

// just for test
$('a').on('click', function (e) {
    e.preventDefault() ;
});

li.active{
  background-color: #FFB94B;
}

Answer 2

您只需要在要更改的元素中添加另一个类。在我的例子中，我定义了名为“active-this”的anther类，并将jquery函数应用于此类。按照示例：

 $('.active-this').on('click', function () {
   $(this).toggleClass('active');
});

// just for test
$('a').on('click', function (e) {
    e.preventDefault() ;
});



li.active{
  background-color: #FFB94B;
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="mobile-advanced">
        <li class="menu-item menu-item-has-children">
            <a href="">T 1</a>
            <ul>
                <li class="menu-item menu-item-has-children">
                    <a href="">T11</a>
                    <ul>
                        <li class="menu-item active-this"><a href="">T111</a></li>
                        <li class="menu-item active-this"><a href="">T112</a></li>
                    </ul>
                </li>
                <li class="menu-item active-this"><a href="">T12</a></li>
                <li class="menu-item active-this"><a href="">T13</a></li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="">T 2</a>
        </li>
    </ul>

Answer 3

您可以使用以下选择器点击li菜单项，不包括父li元素。

$('#mobile-advanced li.menu-item').not(".menu-item-has-children")

＆＃13;

＆＃13;

$('#mobile-advanced li.menu-item').not(".menu-item-has-children").on('click', function (e) {
	e.preventDefault();
	$(this).toggleClass('active');
});

$(".menu-item-has-children").on('click', function(e){
	e.preventDefault();
})

＆＃13;

li.active {
	background-color: #FFB94B;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="mobile-advanced">
	<li class="menu-item menu-item-has-children">
		<a href="">T 1</a>
		<ul>
			<li class="menu-item menu-item-has-children">
				<a href="">T11</a>
				<ul>
					<li class="menu-item">
						<a href="">T111</a>
					</li>
					<li class="menu-item">
						<a href="">T112</a>
					</li>
				</ul>
			</li>
			<li class="menu-item">
				<a href="">T12</a>
			</li>
			<li class="menu-item">
				<a href="">T13</a>
			</li>
		</ul>
	</li>
	<li class="menu-item">
		<a href="">T 2</a>
	</li>
</ul>

＆＃13;

＆＃13;

＆＃13;