ul li中的li的jQuery选择器

Question

I create a menu & want to when click on li children just child set .active class no li parent

(Use in enfold WordPress theme)

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

for example, when I click li children li parent set active class

Answer 1

you can detect event click with a tags :

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

You just need add another class into the element you want to change. In my case, i define anther class called "active-this" and apply the jquery function to this class. Follow the example:

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

You can use the below selector to be able to click on li menu items excluding parent li elements.

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