javascript - jQuery基于active切换侧边栏子菜单

Question

我有一个使用 Bootstrap 4 构建的侧边栏菜单。创建一个使用 jQuery 向右扩展的子菜单。它看起来像这样:

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-1 d-none d-md-block sidebar">
      <div class="sidebar-sticky">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link d-flex align-items-center flex-column sidebar" href="#" data-toggle="collapse" data-target="#submenu" aria-expanded="false" id="sidebarCollapse" >
             <%= image_tag 'products.png' %>
             <p>Products</p>
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <!--Product Sidebar-->
<nav id="sidebar">
    <div class="sidebar-header">
        <h3>Bootstrap Sidebar</h3>
    </div>

    <ul class="list-unstyled components">
        <li class="active">
            <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                Main Item
            </a>
            <ul class="collapse list-unstyled" id="homeSubmenu">
                <li>
                    <a href="#">Item 1</a>
                </li>
                <li>
                    <a href="#">Item 2</a>
                </li>
                <li>
                    <a href="#">Item 3</a>
                </li>
            </ul>
        </li>

    </ul>
</nav>
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Dashboard</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="btn-group mr-2">
            <button class="btn btn-sm btn-outline-secondary">Share</button>
            <button class="btn btn-sm btn-outline-secondary">Export</button>
          </div>
        </div>
      </div>

      <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
    </main>
  </div>
</div>

然后是 jQuery:

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

这基本上可以正常工作。我单击“产品”的 anchor 标记，子菜单/侧边栏将在右侧打开。然而问题是，当不活动时，它将显示 Bootstrap 侧边栏和主项目。如何获得它，以便在不活动时侧边栏具有隐藏的可见性？

我用 jQuery 尝试了以下操作，但没有成功:

$(document).ready(function () {
  $('#sidebar').hide();
    $('#sidebarCollapse').on('click', function (e) {
        e.preventDefault();
        $('#sidebar', this).toggle('active');
    });

});

Answer 1

您是否已将 CSS 设置为最初隐藏它？

#sidebar {
display:none;
}
#sidebar.active{
display:block;
}