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

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;}

看起来早期的 display:block 覆盖了 display:none 你在那里。当然，这可能意味着您还必须将 !important 添加到 .active 规则中。或者，尝试摆脱 ul#Mainnav > li 上的 display:block。