jQuery - 點擊菜單項時關閉手風琴菜單

Question

點擊子菜單鏈接時如何停止手風琴菜單ul.sub-menu關閉？

當父項被點擊時，手風琴打開罰款，但當子菜單項在其下方的級別中被點擊時，它會再次關閉。

這裏是我的HTML：

<ul class="menu"> 
    <li><a href="#">parent 1</a> 
     <ul class="sub-menu"> 
      <li><a href="#">1st child item</a></li> 
     </ul> 
    </li> 
    <li><a href="#">parent 2</a> 
    <ul class="sub-menu current-menu-parent"> 
     <li><a href="#">2nd child item</a></li> 
     <li class="current-menu-item"><a href="#">3rd child item</a></li> 
    </ul> 
    </li> 
    <li><a href="#">parent 3</a> 
     <ul class="sub-menu"> 
      <li><a href="#">4th child item</a></li> 
     </ul> 
    </li>  
</ul>​​​​​​​​ 

這裏是我的jQuery：

jQuery(function($) { 
    $(".menu > li").children("a").attr('href', 'javascript:void(0)'); 
    $('.sub-menu').hide(); 
    $('.current-menu-parent').show();  
    $('.menu > li').click(function() { 
     $(this).find('ul').slideToggle('slow'); 
    }); 
});​ 

Answer 1

手風琴你，

HTML：

<ul class="menu"> 
    <li><a href="javascript:void(0)">parent 1</a> 
     <ul class="sub-menu"> 
      <li><a href="#">1st child item</a></li> 
     </ul> 
    </li> 
    <li><a href="javascript:void(0)">parent 2</a> 
    <ul class="sub-menu current-menu-item"> 
     <li><a href="#">2nd child item</a></li> 
     <li><a href="#">3rd child item</a></li> 
    </ul> 
    </li> 
    <li><a href="javascript:void(0)">parent 3</a> 
     <ul class="sub-menu"> 
      <li><a href="#">4th child item</a></li> 
     </ul> 
    </li>  
</ul>​​​​​​​​ 

CSS：

<style> 
.sub-menu{ 
    display:none; 
} 
.current-menu-item{ 
    display:block; 
} 
</style> 

個

JS：這是你想

rel = 0; 


$('.sub-menu').hover(function(){ // findind mouse postion 
     rel = 1; // if mouse on submenu 
    }, function(){ 
     rel = 0; if mouse out submanu 
}); 
$('.menu > li').live("click",function(){ 


     if(!$(this).hasClass("active")){ // if not already opened 
      $('.sub-menu').slideUp(); // hide all other submenu 
      $('.sub-menu',this).slideDown(); // show which your clicked 
      $(".menu > li").remove('active'); // remove all active class in li 
      $(this).addClass('active'); //adding active class which your clicked li 
     } 
     else{ 
      if(rel==0){ 
       $('.sub-menu').slideUp(); // if clicked already opend parent that will close 
       $(this).removeClass('active'); // remove all active class 
      } 
      else{ 

      } 
     } 
}); 

Answer 2

編輯：

取而代之的是return語句，使用event.stopPropagation()從傳播到停止事件家長。

$('.menu li a').click(function(e) { 
    if(!$(this).closest('ul').hasClass('menu')) e.stopPropagation(); 
}); 

演示：http://jsfiddle.net/qNyR6/1/

---

添加下面的代碼將工作：

$('.menu li a').click(function() { 
    return $(this).closest('ul').hasClass('menu'); 
}); 

這將確保您<a>標籤點擊不會傳播到父<li>導致菜單爲slideToggle（即崩潰，因爲它是一個在擴展狀態下lready）

演示：​​