jQuery Меню навигации аккордеона

Question

У меня есть меню навигации по вертикальному аккордеонному jquery. Everthing работает нормально, но когда я расширяю элемент списка, и если я нажму на элемент списка, он будет скрыт.

Вот код:

HTML:

<div class="sidebar"> 
     <ul> 
      <li> 
       <a href="javascript:void(0)">Item 1 <i class="sidebar-icon glyphicon glyphicon-chevron-left"></i></a> 
       <ul class="sub-menu"> 
        <li> 
         <a href="javascript:void(0)">Sub Item 1</a> 
        </li> 
        <li> 
         <a href="javascript:void(0)">Sub Item 2</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a href="javascript:void(0)">Item 2 <i class="sidebar-icon glyphicon glyphicon-chevron-left"></i></a> 
       <ul class="sub-menu"> 
        <li> 
         <a href="javascript:void(0)">Sub Item 1</a> 
        </li> 
        <li> 
         <a href="javascript:void(0)">Sub Item 2</a> 
        </li> 
        <li> 
         <a href="javascript:void(0)">Sub Item 3</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a href="javascript:void(0)">Item 3 <i class="sidebar-icon glyphicon glyphicon-chevron-left"></i></a> 
       <ul class="sub-menu"> 
        <li> 
         <a href="javascript:void(0)">Sub Item 1</a> 
        </li> 
        <li> 
         <a href="javascript:void(0)">Sub Item 2</a> 
        </li> 
        <li> 
         <a href="javascript:void(0)">Sub Item 3</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a href="javascript:void(0)">Item 4 <i class="sidebar-icon glyphicon glyphicon-chevron-left"></i></a> 
       <ul class="sub-menu"> 
        <li> 
         <a href="javascript:void(0)">Sub Item 1</a> 
        </li> 
        <li> 
         <a href="javascript:void(0)">Sub Item 2</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

JS:

function toggleAccordion(li) { 
    if(li.hasClass('active')) { 
     li.removeClass('active'); 
     $('.sub-menu', li).slideUp(); 
     $('i', li).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left'); 
    } 
    else { 
     $('.sidebar > ul > li.active .sub-menu').slideUp(); 
     $('li i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left'); 
     $('li.active').removeClass('active'); 
     li.addClass('active'); 
     $('.sub-menu', li).slideDown(); 
     $('i', li).removeClass('glyphicon-chevron-left').addClass('glyphicon-chevron-down'); 
    } 
}; 

$('.sidebar > ul > li').click(function(ev) { 
    ev.stopPropagation(); 
    toggleAccordion($(this)); 
}); 
$('.sidebar > ul > li > a').click(function(ev) { 
    ev.stopPropagation(); 
    toggleAccordion($(this).parent()); 
}); 

Я хочу, чтобы быть свернуты при нажатии на элемент списка, который был расширен ,

И я хочу, чтобы он можно было щелкнуть во всей строке.

Если я сделаю функцию щелчка .sidebar ul li a, она работает нормально. Но я могу щелкнуть только по тексту, чтобы получить эффект аккордеона.

Пожалуйста, помогите мне.

Answer 1

Вы не останавливали распространение события щелчка от подпозиций

$('.sidebar > ul > li').click(function (ev) { 
    toggleAccordion($(this)); 
}).find('ul').hide(); 

$('.sidebar li').click(function (e) { 
    e.stopPropagation() 
}); 

Демо: Fiddle