javascript - 如果屏幕小于侧边栏的#px，则删除类？

Question

问题：当屏幕小于 992 像素时，侧边栏会删除类，但这仅在手动缩小屏幕时才会发生 - 与起始屏幕大小无关。

如果屏幕低于 992 像素，我该如何做到这一点，除非单击，否则不会切换侧边栏？

我的JavaScript：

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




           $(window).resize(function(e) {
             if($(window).width()<=992){
               $("#wrapper").removeClass("toggled");
             }else{
               $("#wrapper").addClass("toggled");
             }
           });
         });

看法：

    <div id="wrapper" class="toggled">
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav">
                    <li>
                        <a class="nav-link" href="/shouts">
                            <p>User</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="/seller">
                            <p>This</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="/analytics">
                            <p>Analytics</p>
                        </a>
                    </li>
                </ul>
        </div>

        <div id="main">

          ...

        <div id="page-content-wrapper">
         ...
        </div>
          <%= yield %>
        </div>
     </div>
  </div>

我已经尝试过了，但没有奏效：

function checkWidthAndToggle() {
  if($(window).width()<=992){
    $("#wrapper").removeClass("toggled");
  }else{
    $("#wrapper").addClass("toggled");
  }
}

$(window).on('resize load', checkWidthAndToggle);

CSS：

body {
  overflow-x: hidden;
}

#wrapper {
  padding-left: 0;
  padding-top: 55px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled {
  padding-left: 250px;
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: rgba(255, 0, 0, .79) ;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

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

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-left: 0px;
}

// .navbar .navbar-expand .navbar-dark .navbar-header .navbar-brand .navbar-center  {
//         display: block;
//         text-align:center;
//         float: none;
//         vertical-align: top;
// }


#navbar-center  {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: white;
    text-align: center;


    }


.nav-color {
  background: rgba(1, 0, 0, .79) ;
}

/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #fff;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a:active, .sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav>.sidebar-brand {
  height: 65px;
  font-size: 18px;
  line-height: 60px;
}

.sidebar-nav>.sidebar-brand a {
  color: #999999;
}

.sidebar-nav>.sidebar-brand a:hover {
  color: #fff;
  background: none;
}

@media(min-width:992px) {
  #wrapper {
    padding-left: 0;
  }
  #wrapper.toggled {
    padding-left: 250px;
  }
  #sidebar-wrapper {
    width: 0;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 250px;
  }
  #page-content-wrapper {
    padding: 20px;
    position: relative;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-left: 0;
  }
}

@media only screen and (max-width: 830px) {
  .nav-remove-1 {
    display: none;
  }
}

@media only screen and (min-width: 830px) {
  .side-show-1 {
    display: none;
  }
}


@media (max-width: 543px) {
    .navbar-toggleable .navbar-nav .nav-item {
        margin-right: 0;
    }
}

@media (max-width: 767px) {
    .navbar-toggleable-sm .navbar-nav .nav-item {
        margin-right: 0;
    }
}

@media (max-width: 991px) {
    .navbar-toggleable-md .navbar-nav .nav-item {
        margin-right: 0;
    }
}

.center-just {
  justify-content: center;

}

什么是正确的代码，所以当屏幕低于 992 像素时，侧边栏在页面加载时关闭？

标签： javascriptjquery

Answer 1

我真的不喜欢这个，但它有效。您分配了一个调整大小事件，但实际上您需要调用方法 onload 来检查实际大小。

这并不能解释为什么您的媒体查询不起作用。

$(function(){
           
           function checkWidthAndToggle() {
               if($(window).width()<=992){
                   $("#wrapper").removeClass("toggled");
               }else{
                   $("#wrapper").addClass("toggled");
               }
           }

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

           $(window).resize(checkWidthAndToggle);

           // NOTE: We call it once to check during load.
           checkWidthAndToggle();
         });
         
         

body {
  overflow-x: hidden;
}

#wrapper {
  padding-left: 0;
  padding-top: 55px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled {
  padding-left: 250px;
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: rgba(255, 0, 0, .79) ;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

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

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-left: 0px;
}

// .navbar .navbar-expand .navbar-dark .navbar-header .navbar-brand .navbar-center  {
//         display: block;
//         text-align:center;
//         float: none;
//         vertical-align: top;
// }


#navbar-center  {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: white;
    text-align: center;


    }


.nav-color {
  background: rgba(1, 0, 0, .79) ;
}

/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #fff;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper" class="toggled">
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav">
                    <li>
                        <a class="nav-link" href="/shouts">
                            <p>User</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="/seller">
                            <p>This</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="/analytics">
                            <p>Analytics</p>
                        </a>
                    </li>
                </ul>
        </div>

        <div id="main">

          ...

        <div id="page-content-wrapper">
         ...
        </div>
          <%= yield %>
        </div>
     </div>
  </div>