2010-09-13 13 views
1

J'ai développé ce menu, le sous-ul avec des éléments li coulisser et sortir avec toggle() en cliquant sur le parent li. Si un autre sub ul est montré, le sctipt le ferme. C'est un bon travail avec les liens standards, mais je veux remplacer le lien par clic avec une requête ajax et si la page ne change pas, cliquer sur le lien li imbriqué, fait que le sous-menu relatif soit fermé.empêcher de basculer lorsque vous cliquez sur les éléments imbriqués

Je voudrais empêcher le sous-menu d'être fermé lorsque vous cliquez sur un lien. J'ai essayé de déplacer la fonction de clic de LI à SPAN mais je n'ai pas trouvé la bonne manière.

Le 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); 

le code 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> 

Répondre

10

Je pense arrêter bullage d'événement peut vous aider. Essayez de voir si les travaux ci-dessous ou non

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

OU

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

merci homme beaucoup! ça fonctionne parfaitement! :-) – Mike