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

你不是从分项

停止click事件的传播

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

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

演示：Fiddle