Question

我的代码：

<ul class="nav" id="shop">
<li class="active">
     <a>Type</a> 

   <ul id="category" class="nav1">
   <li ><a>Bulb</a></li>
    <li><a>Focus light</a></li>
    <li><a>Downlight</a></li>
    <li><a>Touch</a></li>
   </ul>
 </li>  



  <li><a>Engery</a></li>
   <li><a>Link 3</a></li>

</ul>

的Javascript

$(function() {

  $( ' ul#shop li' ).on( 'click', function() {
            $( this ).parent().find( 'li.active' ).removeClass( 'active' );
            $( this ).addClass( 'active' );
      });

      $( ' ul#category li' ).on( 'click', function() {
            $( this ).parent().find( 'li.active' ).removeClass( 'active' );
            $( this ).addClass( 'active' );
      });
});

我想显示parent li标记处于活动状态TYPE，其子标记处于非活动状态。

当我点击任何子标记时，child li和parent li处于活动状态。剩余子标记处于非活动状态

EXCEPTED OUTPUT：在单击子节点之前

TYPE //active
     Bulb    //inactive
     Focus light    //inactive
     Down light  //inactive
     Touch   //inactive

单击子节点（Down light）后

TYPE //active
         Bulb    //inactive
         Focus light    //inactive
         Down light  //active
         Touch   //inactive

演示http://jsfiddle.net/9ff79/707/

Answer 1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {

   $( ' ul#shop li a' ).on( 'click', function() {
            $( this ).parent().siblings().find( '.active' ).removeClass( 'active' );
            $( this ).siblings("#category").addClass( 'active' );
            $( this ).addClass( 'active' );
      });

       $( ' #category li ' ).on( 'click', function() {
            $( this ).parent("#category").find( '.active' ).removeClass( 'active' );
            $( this ).parent("#category").parent().find(' > a').addClass( 'active' );
            $( this ).addClass( 'active' );
      }); 
});
</script>
</head>

<style>
  ul.nav a { cursor: pointer; }
  .active { 
    color:blue;
    font-weight:bolder;
   }
</style>
<body>
<ul class="nav" id="shop">
<li>
     <a>Type</a> 

   <ul id="category" class="nav1">
   <li ><a>Bulb</a></li>
    <li><a>Focus light</a></li>
    <li><a>Downlight</a></li>
    <li><a>Touch</a></li>
   </ul>
 </li>  



  <li><a>Engery</a></li>
   <li><a>Link 3</a></li>

</ul>

</body>
</html>

我想显示子菜单li标签处于非活动状态

1 个答案: