默认侧边栏收起

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{

    z-index: 1;

    position: fixed;

    width: 250px;

    height: 100%;

    overflow-y: hidden;

    transition: 0.15s;

    background-color: var(--black) ;

    font-size: 1em;

}

现在也更改样式#page-content-wrapper，以便为侧边栏留出空间：

#page-content-wrapper{

    width: 100%;

    position: absolute;

    padding: 15px;

    padding-left: 250px; /* leaving 250px of space on the left */

    transition: 0.15s;

    color: black;

}

下一步是使封闭的侧边栏具有正确的样式：

#wrapper.menuHidden #sidebar-wrapper{

    width: 0; /* the element of id 'wrapper' and class 'menuHidden' must have width 0 */

}

#wrapper.menuHidden #page-content-wrapper {

    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){

    e.preventDefault(); // prevents the default behavior of the element (if it is an anchor (<a></a>), it loses the ability to change pages, etc.)

    $("#wrapper").toggleClass("menuDisplayed"); // toggles the class 'menuDisplayed' of the element with id 'wrapper'

}

Answer 2

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

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

Answer 3

您应该将课程添加menuDisplayed到您的#wrapper. 然后它可以默认显示。

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

完整的例子可以在这里找到：http: //jsfiddle.net/9ojvnutc/