时间戳

首页 > 解决方案 > 默认侧边栏收起

javascript - 默认侧边栏收起

问题描述

我是 Web 应用程序的新手，所以我对 HTML、CSS 和 JS 的了解还不足以自己处理问题。我按照一些 YT 教程创建了可折叠的侧边栏，但我不知道为什么它默认折叠并且我无法打开它。我认为问题在于我不知道我的代码到底发生了什么。你能告诉我我做错了什么并帮助我理解这应该如何工作吗？

HTML：

<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li>
                <a href="#selectGameSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">
                    <i class="fa fa-fw fa-gamepad"></i> Select something</a>
                <ul class="collapse list-unstyled">
                    <li>
                        <a href="#">Link1</a>
                    </li>
                    <li>
                        <a href="#">Link2</a>
                    </li>
                    <li>
                        <a href="#">Link3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-user"></i> My profile</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-question-circle"></i> FAQ</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-sign-out-alt"></i> Logout</a>
            </li>
        </ul>
    </div>
    <!-- Page content -->
    <div id="page-content-wrapper">
        <!-- some code -->
    </div>
</div>

CSS：

#sidebar-wrapper{
    z-index: 1;
    position: fixed;
    width: 0;
    height: 100%;
    overflow-y: hidden;
    transition: 0.15s;
    background-color: var(--black) ;
    font-size: 1em;
}

#sidebar-wrapper .sidebar-header {
    padding: 20px;
    background: var(--black);
}

#page-content-wrapper{
    width: 100%;
    position: absolute;
    padding: 15px;
    transition: 0.15s;
    color: black;
}

#wrapper.menuDisplayed #sidebar-wrapper{
    width: 250px;
}

#wrapper.menuDisplayed #page-content-wrapper {
    padding-left: 250px;
}

.sidebar-nav{
    padding: 0;
    list-style: none;
}

.sidebar-nav li{
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a{
    display: block;
    text-decoration: none;
    color: var(--gray);
}

.sidebar-nav ul li a {
    font-size: 0.9em;
    display: block;
    color: var(--lightGray)
}

.sidebar-nav li a:hover{
    color: #fff;
    background: var(--gray);
}

.sidebar-nav ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: var(--deepBlue);
}

JS：

$("#menu-toggle").click(function(e){
    e.preventDefault();
    $("#wrapper").toggleClass("menuDisplayed");
});

标签： javascripthtmlcssbootstrap-4

解决方案

您最初可以将类添加menuDisplayed到导航栏（使用 id #wrapper），因此在页面加载时，它将被显示。

<div id="wrapper" class="menuDisplayed">

推荐阅读