выпадающее меню jquery

Question

как я могу изменить этот код, чтобы меню выпадало при наведении ("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>

Answer 1

Когда вы изменяете вложение события .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>