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