Question

CSS：

ul.topnav {
list-style: none;
margin: 0px;
padding: 0px;
display: inline;
}

ul.topnav li {
position: relative;
display: inline;
margin: 0px;
padding: 0px;
}

ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}

ul.topnav li ul.subnav {
list-style: none;
position: absolute;
display: none;
background-color: black;
margin: 0px;
padding: 0px;
border: 1px solid gray;
}

ul.topnav li ul.subnav li {
width: 170px;
margin: 0px;
padding: 0px;
}

HTML：

<ul class="topnav">  
    <li><a href="#">Home</a></li>  
    <li>  
        <a href="#">Tutorials</a>  
        <ul class="subnav">  
            <li><a href="#">Sub Nav Link</a></li>  
            <li><a href="#">Sub Nav Link</a></li>  
        </ul>  
    </li>
</ul>

的Javascript / JQuery的：

$(document).ready(function() {
        $("ul.subnav").parent().append("<span>^</span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)  
        $("ul.topnav li span").click(function() { //When trigger is clicked...  

        //Following events are applied to the subnav itself (moving subnav up and down)  
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  
        $(this).parent().hover(function() {}, function(){  
                $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
        });  

        //Following events are applied to the trigger (Hover events for the trigger)  
        }).hover(function() {  
            $(this).addClass("subhover"); //On hover over, add class "subhover"  
        }, function(){  //On Hover Out  
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"  
        });
 });

单击<span>^</span>时会显示菜单，但是当您想要选择子项目时，菜单会消失。

Answer 1

如果您不再徘徊，会发生什么

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

这被称为。您需要做的是在您认为合适的任何尺寸的导航后面放置一个不可见的div，然后使用.mouseout()来调用.slideup()。

子菜单消失了

1 个答案: