Close dropdown menu when clicking sibling

Question

I have been having issues in trying to make this work.

I have this submenu, that I would like to click its sibling ul, when I click in its sibling.

I have researched here and tried couple things to no avail.

this is what my code is looking like now, the toggle is working fine:

if ( $(window).width() < 740) { 
        $('.submenu').click(function(e){
             e.stopPropagation();
            e.preventDefault();
            var el = (e.target || e.srcElement);
            var $this = $(this);

            $(el).siblings('ul').slideToggle();
            $(el).siblings('ul').addClass('activeState');
            if( $this.siblings().hasClass('activeState')){
                $this.slideUp();
            }
            $(el).find('span').toggleClass('bg-arrow-down bg-arrow-up');
        });
    }

and this is more or less, what my HTML looks like. it has various submenus, and these are the menus that I am trying to make it work.


            
                
                    
                        Products
                        
                                
                        
                    
                
                
                    
                        
                            Item 1
                            
                        

                        
                            
                                SubItem 1
                            
                            
                                SubItem 2
                            
                            
                                SubItem 3
                            
                        

                    
                    
                        Item 2
                        
                    
                    
                        Item 3
                        
                    
                    
                        Item 4
                        
                    
                    
                        Item 5
                        
                    
                
            

            
                
                    
                        Latin Markets              
                        
                            
                        
                    
                
                
                    
                        
                            Item 1
                            
                        

                        
                            
                                SubItem 1
                            
                            
                                SubItem 2
                            
                            
                                SubItem 3
                            
                        

                    
                    
                        Item 2
                        
                    
                    
                        Item 3
                        
                    
                    
                        Item 4
                        
                    
                    
                        Item 5
                        
                    
                
            

            
                
                    
                        Shows
                        
                                
                        
                    
                
                
                    
                        
                            Item 1
                            
                        

                        
                            
                                SubItem 1
                            
                            
                                SubItem 2
                            
                            
                                SubItem 3
                            
                        

                    
                    
                        Item 2
                        
                    
                    
                        Item 3
                        
                    
                    
                        Item 4
                        
                    
                    
                        Item 5

Just that if statement is not working.

Snowmonkey · Accepted Answer

Not sure where you're not seeing that happen -- if you are taking window width to be window width, it may or may not be. Code below is working fine, and I've added a maxWidth value rather than hard-coding the 740 you were using.

I guess the question is, what are you trying to accomplish? When the width is over 740, style it differently? Maybe you want to look at CSS media types?

So you asked about toggling classes. The issue is, the right/down arrows are on a descendant of the clicked node. I've made it work, see below.

$(document).ready(function() {
  // set a default minimum width
  var minWidth = 740;
  // Is the viewport no wider than my min?
  if ($(window).width() < minWidth) {
    // If so, go ahead and hide all submenus
    var myMenu = $(".panel");
    myMenu.find("li:has('ul')").on("click", function(evt) {
      // click on any LI that contains
      //  nested UL's, show the child ul
      //  and hide all of this LI's sibling's
      //  children's nested ULs.
      evt.preventDefault();
      evt.stopPropagation();

      $(this).children("span")
        .toggleClass("glyphicon glyphicon--chevron-right")
        .toggleClass("glyphicon glyphicon-chevron-down");
      $(this).children("ul").slideToggle();

      $(this).siblings(":has(ul:visible)")
        .children("span")
        .toggleClass("glyphicon glyphicon--chevron-right")
        .toggleClass("glyphicon glyphicon-chevron-down");
      $(this).siblings().find("ul:visible").slideUp();

    }).prepend("").children("ul").hide();
    // The above line actually hides all the nested
    //  ULs initially.
  }
})

ul {
  list-style-type: none;
}




  
  
    
      Products
      
        
      
      
        
          
            Item 1
            
          

          
            
              SubItem 1
            
            
              SubItem 2
            
            
              SubItem 3
            
          

        
        
          Item 2
          
        
        
          Item 3
          
        
        
          Item 4
          
        
        
          Item 5
          
        
      
      
    

    
      Latin Markets
      
        
      
      
        
          
            Item 1
            
          

          
            
              SubItem 1
            
            
              SubItem 2
            
            
              SubItem 3
            
          

        
        
          Item 2
          
        
        
          Item 3
          
        
        
          Item 4
          
        
        
          Item 5
          
        
      
      
    


    
      Shows
      
        
      
      
        
          
            Item 1
            
          

          
            
              SubItem 1
            
            
              SubItem 2
            
            
              SubItem 3
            
          

        
        
          Item 2
          
        
        
          Item 3
          
        
        
          Item 4
          
        
        
          Item 5

Close dropdown menu when clicking sibling

Answers (1)

Related Questions