Question

我正在尝试解决一个小问题，我的下拉菜单默认情况下在切换到另一个页面时没有折叠，它就好像是打开，当我按下切换按钮时关闭。有没有简单的方法来解决这个问题？我还没有找到其他问题来帮助我解决问题。

HTML

<label id="menulabel"></label>

            <nav id="navbar">
                    <ul id="Mainnav">

                            <li class="hem">
                                <a href="index.html">
                                    <p>Hem<p>
                                </a>
                            </li>



                            <li id="portfolio">
                                <a href="#">
                                Portfolio ˅
                                </a>

                                <ul id="Subnav">

                                    <li>
                                    <a href="illustrator.html">
                                        Illustrator
                                    </a>
                                    </li>

                                    <li>
                                    <a href="photoshop.html">
                                        Photoshop
                                    </a>
                                    </li>

                                    <li>
                                    <a href="illustrator.html">
                                        InDesign
                                    </a>
                                    </li>

                                </ul>   

                            </li>

CSS

#menulabel {
    float:right;
    display: block;
    width: 44px;
    height: 44px;
    cursor: pointer;
    background: url(../img/icon/Menu.png) no-repeat center center;
}
    ul#Mainnav {
        margin-left:0;
        background:#000000;
        clear:left;
    }

    ul#Mainnav > li {
        float:none;
        width:auto;
        text-align: center;
        display:block;
        margin: 0;
        padding: 0;
    }

    a {
        color:white;
        font-weight:bold;
    }

    ul#Mainnav > li:hover {
        background: rgba(65, 177, 255, 1);

    }

    #Subnav  {
        display:none;
    }

    #Subnav.active  {
        display:block;
    }

JQUERY

$("#menulabel").click(function() {
    $("#navbar").toggleClass("active").stop(true, true).slideToggle(300);

});

Answer 1

尝试将CSS更改为：

ul#Subnav {display:none !important;}

它看起来像是一个早期的显示：块覆盖了那个显示：你没有那个。当然，这可能意味着您还必须在.active规则中添加！important。或者，尝试摆脱ul上的display：block＃Mainnav＆gt;李。

切换页面时默认为可折叠下拉菜单

1 个答案: