Создание сложного меню с помощью Jquery

#javascript #html #jquery #css

Текущее состояние тут. Изменил  эффект при наведении на клик-эффект, однако работает
очень паршиво. Как сделать так чтобы при нажатии на любой элемент открывалось меню
и при нажатии на другой элемент меню закрывался предыдущий нажатый элемент меню?



$('.category li').click(function(event) {
  $(this).children('.r_div').css('display', 'block');
});
ul {
  list-style: none;
  width: 20%;
  position: relative;
}

.category li {
  padding: 5px 0;
  background: #eee;
  border-bottom: 1px solid #fff;
}

.r_div {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
}


  

    Menu #1
    

      

        
Test
        
Test
        
Test
        
Test
        
Test
        
Test
      

    
  
  

    Menu #2
    

      

        
Test2
        
Test2
        
Test2
        
Test2
        
Test2
        
Test2
      

    
  
  

    Menu #3
    

      

        
Test3
        
Test3
        
Test3
        
Test3
        
Test3
        
Test3
      

    
  
  

    Menu #4
    

      

        
Test4
        
Test4
        
Test4
        
Test4
        
Test4
        
Test4
      

    
  
  

    Menu #5
    

      

        
Test5
        
Test5
        
Test5
        
Test5
        
Test5
        
Test5
      

    
  




    

Ответы

Ответ 1

$('.category li').click(function(event) {
  $('.category li').children('.r_div').css('display', 'none');
  $(this).children('.r_div').css('display', 'block');
});
ul {
  list-style: none;
  width: 20%;
  position: relative;
}

.category li {
  padding: 5px 0;
  background: #eee;
  border-bottom: 1px solid #fff;
}

.r_div {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
}


  

    Menu #1
    

      

        
Test
        
Test
        
Test
        
Test
        
Test
        
Test
      

    
  
  

    Menu #2
    

      

        
Test2
        
Test2
        
Test2
        
Test2
        
Test2
        
Test2
      

    
  
  

    Menu #3
    

      

        
Test3
        
Test3
        
Test3
        
Test3
        
Test3
        
Test3
      

    
  
  

    Menu #4
    

      

        
Test4
        
Test4
        
Test4
        
Test4
        
Test4
        
Test4
      

    
  
  

    Menu #5
    

      

        
Test5
        
Test5
        
Test5
        
Test5
        
Test5
        
Test5
      

    
  



Ответ 2

$('.category li').click(function(event) {
  $('.r_div').hide(); // скрыть все с классом "r_div"
  $('.r_div', this).show(); // показать элемент с классом "r_div" относящийся к ДАННОМУ
узлу (this)
});
ul {
  list-style: none;
  width: 20%;
  position: relative;
}

.category li {
  padding: 5px 0;
  background: #eee;
  border-bottom: 1px solid #fff;
}

.r_div {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
}


  

    Menu #1
    

      

        
Test
        
Test
        
Test
        
Test
        
Test
        
Test
      

    
  
  

    Menu #2
    

      

        
Test2
        
Test2
        
Test2
        
Test2
        
Test2
        
Test2
      

    
  
  

    Menu #3
    

      

        
Test3
        
Test3
        
Test3
        
Test3
        
Test3
        
Test3
      

    
  
  

    Menu #4
    

      

        
Test4
        
Test4
        
Test4
        
Test4
        
Test4
        
Test4
      

    
  
  

    Menu #5
    

      

        
Test5
        
Test5
        
Test5
        
Test5
        
Test5
        
Test5
      

    
  



Ответ 3

Можете посмотреть jQueryUI меню

P.S. Может ещё что-то полезное найдете для себя, кроме меню