Блог

как я могу изменить этот код, чтобы меню выпадало при ("ul.topnav li") наведении курсора мыши, а не <span> . когда я изменил код, все ("ul.subnav) выпадало при наведении курсора мыши.

Спасибо,

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

Когда вы меняете .mouseenter() вложение события на li , это изменяет область действия всего, что находится внутри функции. К счастью, весь код внутри просто пытается вернуться к родительскому коду li того span , на который он изначально был нацелен. Итак, чтобы это исправить. вы просто удаляете вызовы 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>