Question

嗨，我正在为我的网站使用adminlte。我想做的是在下拉菜单中打开侧边栏，而用户想要打开第二个下拉列表时，第一个下拉列表会自动关闭。

例如，如果打开了产品下拉菜单，然后我想查看该产品的客户类型，那么如果我单击“销售”下拉列表，则应该关闭产品下拉菜单。

<aside class="main-sidebar sidebar-light-primary elevation-4">
  <!-- Brand Logo -->
  <a href="#" class="brand-link bg-dark">
    <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
      style="opacity: .8">
    <span class="brand-text font-weight-light">AdminLTE 3</span>
  </a>

  <!-- Sidebar -->
  <div class="sidebar">
    <!-- Sidebar user panel (optional) -->
    <div class="user-panel mt-3 pb-3 mb-3 d-flex">
      <div class="image">
        <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
      </div>
      <div class="info">
        <a href="#" class="d-block">Alexander Pierce</a>
      </div>
    </div>

    <!-- Sidebar Menu -->
    <nav class="mt-2">
      <ul id="main-side" class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
        data-accordion="false">
        <!-- Add icons to the links using the .nav-icon class
           with font-awesome or any other icon font library -->


        <li class="nav-item has-treeview ">
          <a href="#" class="nav-link ">
            <i class="nav-icon fas fa-shopping-cart"></i>
            <p>
              Products
              <i class="right fas fa-angle-left"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <div class=" p-2">
              <div class="form-inline  input-group input-group-sm">
                <input class="form-control form-control-navbar" name="" id="" type="search" placeholder="Search"
                  aria-label="">

              </div>

              <div class="custom-control custom-checkbox mt-1 ml-1">
                <input class="custom-control-input " type="checkbox" name="" id="" value="">
                <label class="custom-control-label " for="">Select All</label>
              </div>
            </div>
            <div style="height: 150px;" class="overflow-auto">
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Mango</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Grapes</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Apple</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Oranges</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Banana</label>
                </p>
                </a>
              </li>
            </div>
          </ul>
        </li>
        <!-- Products End -->
        <!-- Customer Type Starts -->
        <li class="nav-item has-treeview">
          <a href="#" class="nav-link ">
            <i class="nav-icon fas fa-store-alt"></i>
            <p>
              Customer Types
              <i class="right fas fa-angle-left"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <div class=" p-2">

              <div class="custom-control custom-checkbox mt-1 ml-1">
                <input class="custom-control-input " type="checkbox" name="" id="" value="">
                <label class="custom-control-label " for="">Select All</label>
              </div>
            </div>
            <div>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Large Retail</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Modern Trade</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Whole Sale</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Small Retail</label>
                </p>
                </a>
              </li>
            </div>
          </ul>
        </li>


      </ul>
    </nav>
    <!-- /.sidebar-menu -->
  </div>
  <!-- /.sidebar -->
</aside>

到目前为止，我已经尝试过此代码。

$('.has-treeview').click(function(){
  if($(this).hasClass('menu-open')){
    $(this).removeClass('menu-open');
  }
  else{
    $(this).addClass('menu-open');
  }
})

Answer 1

<ul id="main-side" class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">

只需删除data-accordion =“ false”

Answer 2

通过大量的Google和代码实验，我有了我想要的东西。

    $('#main-side .has-treeview').click(function(){
    $(this).siblings('.menu-open').removeClass('menu-open').children('.nav-treeview').slideToggle();
  })

当用户在adminlte中打开第二个下拉菜单时，如何关闭侧边栏菜单下拉菜单？

2 个答案: