jquery - Bootstrap 响应侧边栏调整大小为小屏幕 <800px 中的图标菜单

Question

背景

不幸的是，我对来自 PHP 世界的现代 CSS(媒体查询)没有太多经验。因此，我不确定如何从逻辑上解决我的 CSS 布局问题。

我正在尝试创建一个用户仪表板模板，并且一直在学习一些教程。本模板要求如下:

1. 主要内容区域是 Bootstrap 响应
2. 侧边栏可折叠成一个小图标菜单
3. 如果屏幕小于 800 像素，侧边栏菜单会自动显示
4. 侧边栏折叠时(如果屏幕 <800px)可以重新打开

到目前为止我拼凑的内容:

$(document).ready(function() {
        $('#sidebar-btn').click(function() {
            $('#sidebar-wrapper').toggleClass('visible');
            $('#wrapper').toggleClass('visible');
        });
    });

/* navbar */
.navbar {
    margin-left:50px;
}

/* main content */
#page-content-wrapper {
    width:100%;
    position:absolute;
    padding:15px;
    padding-top:50px;
}

/* sidebar minimized */
#sidebar-wrapper {
    background:#444444;
    display:block;
    position:fixed;
    height:100%;
    z-index:1;
}
#sidebar-wrapper ul {
    margin:0px;
    padding:0px;
}
#sidebar-wrapper ul li {
    list-style:none;
}
#sidebar-wrapper ul li i {
    font-size:24px;
}
#sidebar-wrapper ul li span:nth-child(2) {
    display:none;
}
#sidebar-wrapper ul li a {
    display:block;
    padding:12px 12px;
    width:50px;
    color:#eeeeee;
    background:#222222;
    border-bottom:1px solid #444444;
}
#sidebar-wrapper ul li a:hover {
    color: #aaaaaa;
    background-color: #444444;
    text-decoration:none;
}
#sidebar-header {
    height:50px;
    background:#444444;
}
#sidebar-header h3 {
    display:none;
}
#sidebar-btn {
    display:inline-block;
    vertical-align:middle;
    cursor:pointer;
    position:absolute;
    top:0px;
    right:0px;
}
#sidebar-btn i {
    font-size:18px;
    color:#ffffff;
    padding:16px;
}
/* set element styles to fit tablet and higher(desktop) */
@media screen and (min-width: 800px) {
    /* sidebar visible */
    #sidebar-wrapper.visible {
        left:0px;
    }
    #sidebar-wrapper.visible ul li span:nth-child(2) {
        display:inline-block;
    }
    #sidebar-wrapper.visible ul li i {
        color: #777777;
        font-size:14px;
        min-width: 20px;
        text-align: center;
    }
    #sidebar-wrapper.visible ul li a {
        background:#222222;
        color:#cccccc;
        border-bottom:1px solid #444444;
        display:block;
        width:200px;
        padding:15px;
        font-size:14px;
    }
    #sidebar-wrapper.visible ul li a:hover {
        background:#777777;
        color:#eeeeee;
    }
    #sidebar-wrapper.visible h3 {
        display:inline-block;
        margin:0px;
        color:#fff
    }
    #wrapper.visible #page-content-wrapper {
        padding-left:200px;
    }
    #wrapper.visible .navbar {
        margin-left:200px;
    }
}

<!-- Latest compiled and minified CSS -->

<script src="https://use.fontawesome.com/3c2244d372.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="visible">
    <!-- sidebar -->
    <div id="sidebar-wrapper" class="visible">
        <div id="sidebar-header">
            <h3></h3>
        </div>
        <ul class="sidebar-nav">
            <li><a href="#"><span><i class="fa fa-tachometer"></i></span><span>Dashboard</span></a></li>
            <li><a href="#"><span><i class="fa fa-calendar"></i></span><span>Schedule</span></a></li>
            <li><a href="#"><span><i class="fa fa-credit-card"></i></span><span>Orders</span></a></li>
            <li><a href="#"><span><i class="fa fa-cogs"></i></span><span>Settings</span></a></li>
            <li><a href="#"><span><i class="fa fa-life-ring"></i></span><span>Help</span></a></li>
        </ul>
        <div id="sidebar-btn">
            <i class="fa fa-bars" aria-hidden="true"></i>
        </div>
    </div>
    <!-- end sidebar -->

    <!-- main content -->
    <div id="page-content-wrapper">

        <nav class="navbar navbar-fixed-top navbar-inverse">
            <div class="container">
                <div id="navbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Signed in as</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container-fluid">

            <div class="row">
        <div class="col-md-12">
            <h1>Test Page</h1>
            <br>
            <p>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </p>
        </div>
    </div>

        </div>
    </div>
</div>

问题

我在第四点上遇到了问题。到目前为止，如果我调整屏幕大小，侧边栏会弹出一个图标菜单，但当屏幕处于小模式时，我无法再展开该菜单。我如何覆盖 CSS 特异性，以便在切换可见类时，即使屏幕很小，我也可以再次查看菜单。

Answer 1

在我看来，您没有正确的代码来在最大宽度为 800 像素的屏幕上显示#sidebar-wrapper。您声明了@media 规则:

@media screen and (min-width: 800px)

并且把显示侧边栏的所有代码都嵌套在里面，所以在这种情况下，Jquery只有在屏幕大于800px时才会展开侧边栏。

尝试为

做同样的事情

@media (max-width: 800px)

但是，据我所知，在这种情况下不需要媒体查询，因为您想要在所有尺寸的屏幕上使用相同的可扩展侧边栏。

UPD
将您现有的 JS 代码更改为此代码:

$(document).ready(function() {
 if (window.matchMedia('(max-width: 800px)').matches) {

   $('#sidebar-wrapper').removeClass('visible')
   $('#wrapper').removeClass('visible');

   $('#sidebar-btn').click(function() {

     $('#sidebar-wrapper').toggleClass('visible');
     $('#wrapper').toggleClass('visible');
   });  
 } else {
     $('#sidebar-btn').click(function() {

       $('#sidebar-wrapper').toggleClass('visible');
       $('#wrapper').toggleClass('visible');
     });  
   }
});

您还需要删除这一行:

@media screen and (min-width: 800px) {

并且不要忘记删除末尾的右花括号。