默认侧边栏收起

Question

我是 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;

}

Answer 1

好的，我会告诉你如何实现你想要的（2 种方法），然后我会解释你的代码是如何工作的。方法一在您的第一个 div ( #wrapper) 中，添加类menuDisplayed：<div id="wrapper" class="menuDisplayed">方法二您还可以更改您的 CSS 以执行您想要的操作，并使“显示的菜单”成为默认样式：在整个代码中将“menuDisplayed”替换为“menuHidden”，使其在语义上继续有意义更新样式以#sidebar-wrapper赋予其宽度 0 以外的值。#sidebar-wrapper{&nbsp; &nbsp; z-index: 1;&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; width: 250px;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; overflow-y: hidden;&nbsp; &nbsp; transition: 0.15s;&nbsp; &nbsp; background-color: var(--black) ;&nbsp; &nbsp; font-size: 1em;}现在也更改样式#page-content-wrapper，以便为侧边栏留出空间：#page-content-wrapper{&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; padding: 15px;&nbsp; &nbsp; padding-left: 250px; /* leaving 250px of space on the left */&nbsp; &nbsp; transition: 0.15s;&nbsp; &nbsp; color: black;}下一步是使封闭的侧边栏具有正确的样式：#wrapper.menuHidden #sidebar-wrapper{&nbsp; &nbsp; width: 0; /* the element of id 'wrapper' and class 'menuHidden' must have width 0 */}#wrapper.menuHidden #page-content-wrapper {&nbsp; &nbsp; padding-left: unset; /* clears the attribute that gave space to the sidebar */}现在我将解释您的代码是如何工作的（在您更改侧边栏行为之前）：你的 CSS 告诉浏览器带有sidebar-wrapperid 的元素应该有空宽度（所以它不会在你加载页面后立即出现），但它也说带有 id 的元素sidebar-wrapper在另一个元素内部时应该是 250px 宽wrapperid 和menuDisplayed班级。menuDisplay魔法就在你的 javascript 中：它告诉浏览器用id切换元素的类wrapper，这会激活 CSS 样式，使你的侧边栏宽 250 像素，然后它就会出现。再次切换时，menuDisplayed该类将从具有 id 的元素中删除，wrapper并且您的侧边栏返回宽度等于 0。使用 jQuery为$("#menu-toggle").click“click”事件添加事件侦听器。当这个事件被触发时（有人点击了带有 id 的元素menu-toggle），回调函数被执行：function(e){&nbsp; &nbsp; e.preventDefault(); // prevents the default behavior of the element (if it is an anchor (<a></a>), it loses the ability to change pages, etc.)&nbsp; &nbsp; $("#wrapper").toggleClass("menuDisplayed"); // toggles the class 'menuDisplayed' of the element with id 'wrapper'}

Answer 2

您最初可以将类添加menuDisplayed到导航栏（使用 id&nbsp;#wrapper），因此在页面加载时，它将被显示。<div&nbsp;id="wrapper"&nbsp;class="menuDisplayed">

Answer 3

您应该将课程添加menuDisplayed到您的#wrapper.&nbsp;然后它可以默认显示。<div&nbsp;id="wrapper"&nbsp;class="menuDisplayed">完整的例子可以在这里找到：http:&nbsp;//jsfiddle.net/9ojvnutc/