Как скрыть Boostrap Navbar с jQuery?

Question

Поэтому я пытаюсь создать скрытую боковую панель навигации, используя Jquery и Boostrap 4. Дело в том, что когда я пытаюсь использовать обработчик события .on ('click', ...) для кнопки, которую он не будет скрывать боковая панель. Я проверил инструменты разработчика и файлы были загружены правильно. Я также попытался использовать фактический метод .click, и он также не будет работать.

Я все еще новичок, так что имейте это в виду. Спасибо!

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

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
}
#sidebar.active {
    display: -250px;
}
#sidebar {
    min-width: 250px;
    max-width: 250px;
    min-height: 100vh;
    /* margin-left: -250px; */
}
a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="wrapper">
          <!-- NOTE: Sidebar -->
      <nav id="sidebar">
          <div class="sidebar-header">
              <h3>Bootstrap Sidebar</h3>
          </div>
          <ul class="list-unstyled components">
              <p>Dummy Heading</p>
              <li class="active">
                  <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
                  <ul class="collapse list-unstyled" id="homeSubmenu">
                      <li>
                          <a href="#">Home 1</a>
                      </li>
                      <li>
                          <a href="#">Home 2</a>
                      </li>
                      <li>
                          <a href="#">Home 3</a>
                      </li>
                  </ul>
              </li>
              <li>
                  <a href="#">About</a>
              </li>
              <li>
                  <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
                  <ul class="collapse list-unstyled" id="pageSubmenu">
                      <li>
                          <a href="#">Page 1</a>
                      </li>
                      <li>
                          <a href="#">Page 2</a>
                      </li>
                      <li>
                          <a href="#">Page 3</a>
                      </li>
                  </ul>
              </li>
              <li>
                  <a href="#">Portfolio</a>
              </li>
              <li>
                  <a href="#">Contact</a>
              </li>
          </ul>

      </nav>
        <!-- NOTE: page content -->
      <div id="content">

          <nav class="navbar navbar-expand-lg navbar-light b-light">
              <div class="container-fluid">

                  <button type="button" id="sidebarCollapse" class="btn btn-dark">
                      <i class="fas fa-align-left"></i>
                      <span>Toggle Sidebar</span>
                  </button>
              </div>
          </nav>
      </div>
    </div>

Answer 1

bootsrap уже делает это для вас с переключателем, используйте это

  $('#sidebar').toggle();

не используйте
$('#sidebar').toggleClass('active');

это рабочий пример https://jsfiddle.net/740cv2m5/