jquery menu déroulant

Question

comment puis-je modifier ce code afin que le menu tombe lorsque le ("ul.topnav li") est plané et non le . quand j'ai changé le code, tous les ("ul.subnav) ont chuté quand j'ai survolé.

grâce,

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 

     $("ul.subnav").parent().append("<span></span>"); 

     //When trigger is clicked... 
     $("ul.topnav li span").mouseenter(function() { 

      //Following events are applied to the subnav itself 
      //(moving subnav up and down) 

      //Drop down the subnav on click 
      $(this).parent().find("ul.subnav").slideDown('fast').show(); 

      $(this).parent().hover(function() { 
      }, function() { 
       //When the mouse hovers out of the subnav, move it back up 
       $(this).parent().find("ul.subnav").slideUp('slow'); 
      }); 

     //Following events are applied to the trigger 

     }).hover(function() { //(Hover events for the trigger) 

      $(this).addClass("subhover"); //On hover over, add class "subhover" 
     }, function() { //On Hover Out 

      //On hover out, remove class "subhover" 
      $(this).removeClass("subhover"); 
     }); 

    }); 


</script> 

Answer 1

Lorsque vous modifiez l'attachement de l'événement .mouseenter() au li, il change la portée de tout à l'intérieur de la fonction. Heureusement, tout le code à l'intérieur essaie juste de revenir au parent li du span qu'il ciblait à l'origine. Donc, pour résoudre ce problème. vous supprimez simplement les appels à parent() le cas échéant.

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 

     $("ul.subnav").parent().append("<span></span>"); 

     //When trigger is clicked... 
     $("ul.topnav li").mouseenter(function() { 

      //Following events are applied to the subnav itself 
      //(moving subnav up and down) 

      //Drop down the subnav on click 
      $(this).find("ul.subnav").slideDown('fast').show(); 

      $(this).parent().hover(function() {}, 
      function() { 
       //When the mouse hovers out of the subnav, move it back up 
       $(this).find("ul.subnav").slideUp('slow'); 
      }); 

     //Following events are applied to the trigger 

     }).hover(function() { //(Hover events for the trigger) 

      $(this).addClass("subhover"); //On hover over, add class "subhover" 
     }, function() { //On Hover Out 

      //On hover out, remove class "subhover" 
      $(this).removeClass("subhover"); 
     }); 

    }); 
</script>