jQuery ul li 中 li 的选择器

Question

我创建了一个菜单并希望在点击 li children just 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 set active class

Answer 1

您可以使用 a 标签检测事件 click :

$('#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;
}

<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>

Answer 2

您只需在要更改的元素中添加另一个 class。在我的例子中，我定义了名为 "active-this" 的花药 class，并将 jquery 函数应用于此 class。跟例：

 $('.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")

$('#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();
})

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

<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>

jQuery ul li 中 li 的选择器

jQuery selector for li in ul li

javascript

jquery

jquery-selectors