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

.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");
});

Answer 1

您可以最初将类menuDisplayed添加到导航栏（ID为#wrapper），以便在页面加载时显示。

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

Answer 2

您应该将类menuDisplayed添加到#wrapper中。那么它可以默认显示。

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

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

Answer 3

好的，我将告诉您如何实现所需的内容（两种方法），然后说明代码的工作原理。

方法1

在您的第一个div（#wrapper）中，添加类menuDisplayed：

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

方法2

您还可以更改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告诉浏览器ID为sidebar-wrapper的元素应为null宽度（因此，加载页面后该元素不会立即出现），但是它也表明id为{{1的元素}}在另一个具有sidebar-wrapper id和wrapper类的元素中时，应为250px宽。

JavaScript中的魔力在于：它告诉浏览器切换ID为menuDisplayed的元素的menuDisplay类，这将激活CSS样式，使您的侧边栏变为250px宽，于是出现。再次切换后，wrapper类将从ID为menuDisplayed的元素中删除，并且边栏将返回宽度等于0的值。

wrapper使用jQuery为'click'事件添加事件监听器。当触发此事件（有人单击带有$("#menu-toggle").click id的元素）时，将执行回调函数：

menu-toggle

默认折叠的边栏

3 个答案:

方法1

方法2