Code for implementing the accordion side menu effect using jQuery

This article mainly introduces the effect of the accordion side menu implemented by jQuery, involving implementation techniques related to jQuery Event Response and element attribute dynamic operations, for more information, see the next article. This article describes the effect of the accordion side menu implemented by jQuery, and describes implementation techniques related to jQuery Event Response and element attribute dynamic operations. For more information, see

This article describes the effect of the accordion side menu implemented by jQuery. We will share this with you for your reference. The details are as follows:

The following is a simple accordion menu ,:

 
 

  
  
B 
   
 
    
C
 
    
C
 
    
C
 
   
  
  
B 
   
 
    
C
 
    
C
 
    
C
 
   
  
  
B 
   
 
    
C
 
    
C
 
    
C
 
   
 
 

Css code, mainly set the background color and the Left Border style of the sub-menu, set the floating and selected style, and start to set the sub-menu not to display (click through js settings and then display ):

#menup{  width: 200px;  background-color: #029FD4;}.parentLi{  width: 100%;  line-height: 40px;  margin-top: 1px;  background: #1C73BA;  color: #fff;  cursor: pointer;  font-weight:bolder;}.parentLi span{  padding: 10px;}.parentLi:hover, .selectedParentMenu{  background: #0033CC;}.childrenUl{  background-color: #ffffff;  display: none;}.childrenLi{  width: 100%;  line-height: 30px;  font-size: .9em;  margin-top: 1px;  background: #63B8FF;  color: #000000;  padding-left: 15px;  cursor: pointer;}.childrenLi:hover, .selectedChildrenMenu{  border-left: 5px #0033CC solid;  background: #0099CC;  padding-left: 15px;}

Next, click the Event code:

$(".parentLi").click(function(event) {    $(this).children('.childrenUl').slideToggle();});$(".childrenLi").click(function(event) {    event.stopPropagation();    $(".childrenLi").removeClass('selectedChildrenMenu');    $(".parentLi").removeClass('selectedParentMenu');    $(this).parents(".parentLi").addClass('selectedParentMenu');    $(this).addClass('selectedChildrenMenu');});

The above is the details of jQuery's code for implementing the effect of the accordion side menu. For more information, see other related articles in the first PHP community!