jqueryドロップダウンメニュー

Question

("ul.topnav li")がホバーされていて、<span>が表示されていないときにメニューがドロップするように、このコードを変更するにはどうすればよいですか？私がコードを変更したときには、("ul.subnav)が上に乗ったときに全てが落ちました。

おかげで、あなたはliから.mouseenter()イベントの添付ファイルを変更すると

<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

、それは関数内のすべての範囲を変更します。幸いにも、その中のすべてのコードは、元々ターゲティングしていたspanの親liに戻ろうとします。だから、これを修正する。適切な場合はparent()への呼び出しを削除するだけです。

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