防止當點擊嵌套元素時切換

Question

我已經開發了這個菜單，具有li元素的子ul滑入和滑出並用toggle（）單擊父li。如果顯示另一個子文件，則關閉它。這對於標準鏈接來說相當不錯，但我想用ajax請求替換鏈接點擊，並且如果頁面不改變，單擊嵌套的li鏈接，會使相關子菜單被關閉。

我想阻止子菜單在點擊鏈接時關閉。我試圖將點擊功能從LI移到SPAN，但我沒有找到正確的方法。

的JavaScript：

(function($){ 
$.fn.extend({ 
    verticalfade: function(options){ 

     var defaults = { 
      speed: 'normal' 
     }; 
     var options = $.extend(defaults, options); 

     $(this).addClass('verticalFadeMenu'); 

     //close all sub menu     
     $('ul#verticalfade li ul').each(function(){ 
      $('ul#verticalfade li ul').hide(); 
     });  

     //toggle sub menu 
     $('ul#verticalfade li').live('click',function(){ 
      var t = this; 

      $('ul#verticalfade li').each(function(){ 
       if (this != t) 
       { 
        if($(this).children('ul').is(":visible")) 
        { 
         $(this).children('ul').toggle(800); 
        } 
       } 
       else 
       { 
        $(this).children('ul').toggle(800); 
       } 
      }); 
     }) 

     //manage links 
     $("ul#verticalfade li ul li a").click(function(e){ 
      //prevent default action 
      e.preventDefault(); 
     }); 
    }  
});})(jQuery); 

的HTML：

<div id="verticalfade_container"> 
    <ul id="verticalfade"> 
     <li><span>First</span> 
      <ul> 
       <li><a href="test1.html">Link 1</a></li> 
       <li><a href="test2.html">Link 2</a></li> 
      </ul> 
     </li> 
     <li><span>Second</span> 
      <ul> 
       <li><a href="test1.html">Link 1</a></li> 
       <li><a href="test2.html">Link 2</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Answer 1

我想停止事件冒泡可以幫助你。嘗試看看是否低於或工作不

$("ul#verticalfade li ul li a").click(function(e){ 
     e.stopPropagation(); 
    }); 

OR

$("ul#verticalfade li ul li a").click(function(e){ 
     return false; // should cancel default action as well as event bubbling. 
    });