Question

我有一个css水平菜单，其中有一个菜单/子菜单显示在悬停上工作，但是当我选择该页面时，我还想让子菜单选项保持不变。下面的代码显示了悬停时的子菜单，但在鼠标移出时会消失。我有一些困难想弄清楚如何使我的代码工作以保持子菜单项保持不变？我怎么能这样做？

感谢您的帮助。

这是HTML：

<ul id="menu_nav">
    <li>
        <a href="#" class="button">Home</a>
        <span>
            <a href="#">Home Link1</a> 
            <a href="#">Home Link2</a> 
            <a href="#">Home Link3</a>
        </span>
    </li>
    <li>
        <a href="#" class="button">About Us</a>
        <span>
            <a href="#">About Link1</a> 
            <a href="#">About Link2</a> 
            <a href="#">About Link3</a>
        </span>
    </li>
</ul>

这是CSS

ul#menu_nav
{
    position:relative;
    float:left;
    width:790px;
    padding:0;
    margin:0;
    list-style-type:none;
    background-color:#000099;
}
ul#menu_nav li {float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555;}

ul#menu_nav li a.button
{
    float:left;
    text-decoration:none;
    color:white;
    background-color:#000099;
    padding:0.2em 0.6em;
    border-right:1px solid #CCCCCC;

    font-family: Tahoma;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    position: relative;
    height: 21px;
    line-height:1.85em;
}
ul#menu_nav li a:hover {
    background-color:#F7F7F7;
    color:#000099;
    border-top:1px solid #CCCCCC;
}

ul#menu_nav li span{
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:25px;
    display: none; /*--Hide by default--*/
    width: 790px;
    background: #F7F7F7;
    color: #fff;
}
ul#menu_nav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#menu_nav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#menu_nav li span a:hover {text-decoration: underline;}

继承人jquery：

$("ul#menu_nav li").hover(function() { //Hover over event on list item
        $(this).css({ 'background' : '#1376c9'}); //Add background color and 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
    });

Answer 1

我不确定你要做什么，但我确信无论它是什么都可以通过在你想要保持的任何东西中添加一个类来实现，而不是修改它的CSS或隐藏它。像

这样的东西

$("ul#menu_nav li").hover(function() { //Hover over event on list item
    $(this).css({ 'background' : '#1376c9'}); 
    $(this).find("span").addClass('keep').show(); //Show the subnav
} , function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    $(this).find("span:not(keep)").hide(); //Hide the subnav
});

Answer 2

布莱恩，谢谢。我基本上对你的建议做了些什么。我已经有一个名为“.selected”的类，它用于显示菜单的选定选项卡。在“悬停”事件中，我放置一个if语句来检查该类是否已“选中”，如果是，我只是显示隐藏的span标记。 “$（本）。接下来（）显示（）;”是在“点击”事件中完成我需要的行以使子菜单保持不变。希望它可以帮助其他任何人。

参见代码：

$("ul#menu_nav li").hover(function() { //Hover over event on list item
            $(this).css({ 'background' : '#1376c9'}); //Add background color and image on hovered list item
            $(this).find("span").show(); //Show the subnav
        } , function() { //on hover out...
            $(this).css({ 'background' : 'none'}); //Ditch the background

            if( $(this).children("a").is('.selected') ) 
            {
                $(this).children("span").show();
            } 
            else 
            {
                $(this).find("span").hide(); //Hide the subnav
            }
        });

        $(".menu_buttons li>a").click(function(){
            $(this).addClass('selected').removeClass('button')
                    .parents().siblings().children("a").removeClass('selected').addClass('button')
                    .parents().siblings().children("span").hide()
            $(this).next().show();
        });

如何在选择子页面时使css子菜单保持不变

2 个答案: