如何使引导边栏默认关闭?

 收藏

我正在尝试在加载页面时使边栏默认折叠。当前,当我单击侧边栏上的折叠按钮时,它会折叠。我怎样才能做到这一点?

html代码

 <div class="wrapper">
   <nav id="sidebar">
    <div class="sidebar-header">
      <button type="button" id="sidebarCollapse" class="btn btn-info">
          <i class="fa fa-bars"></i>                  
      </button>
  </div>

        <ul class="list-unstyled components">
          <li class="nav-item active">
           ----------------
        </ul>

    </nav>    
      <div id="base" class="col pt-2" style="overflow: auto;">

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

js函数

$('#sidebarCollapse').on('click', function () {
    $('#sidebar').toggleClass('active');
  });

  $("#sidebar .nav-item").on("click", function () {
    $("#sidebar .nav-item").removeClass("active");
    $(this).addClass("active");
  });  

CSS代码:

    #sidebar {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
    }
    #sidebar.active {
        margin-left: 0 !important;
    }
    #sidebar .sidebar-header h3,
    #sidebar .CTAs {
        display: none;
    }
    #sidebar .sidebar-header strong {
        display: block;
    }
    #sidebar {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}
回复
  • 如果您使用Jquery,请尝试以下操作:

    $( document ).ready(function() {
    $("#wrapper").toggleClass("toggle");});
    

    或HTML选项:

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

    在问之前,请先在这里检查其他问题。