Question

我正在使用菜单加载（因此无法检查网址），并且我想在点击链接后保持子菜单打开，直到主栏上的新悬停

JS：

 $(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
    $(this).css({ 'background' : '#32CD32 '}); //Add background color + image on hovered list item
    $(this).find("span").show(); //Show the subnav

});
} , function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    $(this).find("span").hide(); //Hide the subnav
});

HTML：

<ul id="topnav">

        <li><a href="home.php">Home</a></li>

        <li>
            <a href="test.php">Test</a>
            <span class="menud">
                <a href="test2.php">Test2</a> |
                <a href="">.</a> |
                <a href="">.</a>
            </span>
        </li>

    </ul>

CSS：

 ul#topnav {
    margin: 0; padding: 0;
    float: left;
    width:100%;
    list-style: none;
    position: relative;
    font-size: 12px;
    background: #000000;

}

ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #32CD32;
}
ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
}

ul#topnav li a:hover{ color: #000000; font-weight:bold;cursor:default;}
ul#topnav li:hover { background: #32CD32 ; }
ul#topnav li span.menud {
    float: left;
    padding: 10px 0;
    position: absolute;
    left: 0; top:30px;
    display: none;
    width:100%;
    background: #32CD32;
    color: #fff;
}

ul#topnav li:hover span.menud { display: block; width:100%;}
ul#topnav li span.menud a { display: inline; }
ul#topnav li span.menud a:hover {text-decoration: underline;}

请原谅我，我不是母语为英语的人，谢谢你的帮助。

Answer 1

<强> Example

这不一定能解决您的问题（正如我的评论所解释的那样），但它确实改善了悬停，这可能是您首先遇到的问题。：）

$(document).ready(function() {

$("ul#topnav li").bind('mouseover', function() { //Hover over event on list item
    $(this).css({ 'background' : '#32CD32 '}); //Add background color + image on hovered list item
    $(this).find("span").show(); //Show the subnav

}).bind('mouseout', function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    $(this).find("span").hide(); //Hide the subnav
});

Jquery，点击后保持subnav打开直到新的悬停

1 个答案: