登录
当前位置： 首页 > 知识库问答 >
问题：

当另一个下拉菜单打开时，下拉菜单未关闭（活动）

吴驰
2023-03-14

我正在尝试制作一个下拉菜单，其中。单击时会显示下拉内容，如果用户单击栏中的任何其他下拉列表，下拉内容将消失。问题是我有多个下拉列表，我想我只是需要帮助修改我现有的javascript。我希望侧边栏（nav）只显示当前活动的下拉菜单。在“我的代码”上，当您打开下拉列表时，它仍然会打开，直到用户再次单击下拉箭头以关闭该特定下拉列表。

$(document).ready(function() {
      "use strict"; // Start of use strict

      //Sidebar menu
      $('.show-sidebar').on('click', function() {
        $('#sidebar').toggleClass('collapse-sidebar');
        $('#layout-admin').toggleClass('collapse-sidebar');
      });
      $('.has-sub').on('click', function() {
        $('.has-sub').toggleClass('open-dropdown');
        $('.sub-nav').slideToggle("slow");
      });
      $('.has-sub2').on('click', function() {
        $('.has-sub2').toggleClass('open-dropdown');
        $('.sub-nav2').slideToggle("slow");
      });
      $('.has-sub3').on('click', function() {
        $('.has-sub3').toggleClass('open-dropdown');
        $('.sub-nav3').slideToggle("slow");
      });
      $('.has-sub4').on('click', function() {
        $('.has-sub4').toggleClass('open-dropdown');
        $('.sub-nav4').slideToggle("slow");
      });
      $('.has-sub5').on('click', function() {
        $('.has-sub5').toggleClass('open-dropdown');
        $('.sub-nav5').slideToggle("slow");
      });
      $('.has-sub6').on('click', function() {
        $('.has-sub6').toggleClass('open-dropdown');
        $('.sub-nav6').slideToggle("slow");
      });
      $('.has-sub7').on('click', function() {
        $('.has-sub7').toggleClass('open-dropdown');
        $('.sub-nav7').slideToggle("slow");
      });
    });
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  color: #000;
  background-color: #fff;
  margin: 0;
  line-height: 1.42857143;
  font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif;
}

body {
  font-size: 14px;
  color: #000;
  background-color: #fff;
  margin: 0;
  line-height: 1.42857143;
  font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif;
}


/*============================
Header
============================*/

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

ul li a .icon {
  height: 40px;
  width: 40px;
  margin-right: 13px;
  background: #ffffff1a;
  display: flex;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
}

ul li a .icon span {
  line-height: 40px;
  font-size: 20px;
  color: #b0b3b8;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

span.field-requried {
  color: red;
}

.hide {
  display: none;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-image: linear-gradient(to bottom, #000, #333);
  transition: all 0.3s;
  position: fixed;
  top: 0;
  height: 100vh;
}

#sidebar .sidebar-header {
  padding: 15px 5px;
  text-align: center;
  height: 60px;
}

#sidebar .sidebar-header img {
  width: 100px;
  height: auto;
  vertical-align: middle;
}

#sidebar ul.list-unstyled li {
  margin-bottom: 10px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

#sidebar ul.list-unstyled li a {
  height: 40px;
  padding: 8px 25px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.1px;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
}

#sidebar ul.list-unstyled li a.has-sub::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub2::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub3::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub4::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub5::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub6::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub7::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub8::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub2.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub3.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub4.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub5.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub6.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub7.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub8.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a i {
  font-size: 16px;
  width: 18px;
  text-align: center;
  margin-right: 15px;
}

#sidebar ul.list-unstyled li:first-child a i {
  font-size: 18px;
}

#sidebar ul.list-unstyled li:hover,
#sidebar ul.list-unstyled li.active {
  background-color: rgba(255, 255, 255, 0.15);
}

#sidebar.collapse-sidebar {
  min-width: 50px;
  max-width: 50px;
  text-align: center;
}

#sidebar.collapse-sidebar .sidebar-header img {
  width: 40px;
}

#sidebar ul.list-unstyled {
  padding: 0;
  margin: 0;
  list-style: none;
}

#sidebar.collapse-sidebar ul.list-unstyled li a {
  height: 60px;
  padding: 20px 0;
}

#sidebar.collapse-sidebar ul.list-unstyled li a i {
  font-size: 18px;
  width: 20px;
  margin-right: 0;
}

#sidebar.collapse-sidebar ul.list-unstyled li a span.sidebar-menu-text {
  display: none;
}

#sidebar.collapse-sidebar ul.list-unstyled li:first-child a i {
  font-size: 20px;
}

#layout-admin {
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
  width: calc(100% - 50px);
  min-height: 100vh;
  transition: all 0.3s;
  background-color: #f5f7f9;
}

#layout-admin .header {
  height: 60px;
  background-color: rgb(232, 2, 21);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px 0 15px;
  position: sticky;
  z-index: 10;
  top: 0;
  width: 100%;
}

#layout-admin .header .header-left {
  font-size: 0;
}

#layout-admin .header .header-right>div {
  display: inline-block;
}

#layout-admin .header .header-right a {
  font-size: 28px;
  color: #fff;
}

#username {
  font-size: 20px;
  vertical-align: middle;
  padding-bottom: 10px;
  margin-right: 10px;
}

#layout-admin .header .header-right .setting {
  margin-right: 40px;
}

#layout-admin .header .header-left button.show-sidebar {
  background-color: transparent;
  border: none;
  font-size: 28px;
  color: #fff;
  /*-webkit-text-stroke: 1.5px white;*/
  display: inline-block;
  vertical-align: middle;
  margin-right: 25px;
  outline: none;
  cursor: pointer;
}

#layout-admin .header .header-left .logo {
  display: inline-block;
  vertical-align: middle;
}

#layout-admin .header .header-left .title {
  display: inline-block;
  vertical-align: middle;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

#layout-admin .header .header-left .title span {
  font-weight: normal;
}

#layout-admin .content-admin {
  padding: 20px;
}

#layout-admin .content-admin .title-content {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 30px;
}

#layout-admin.collapse-sidebar {
  width: calc(100% - 250px);
  transform: translate3d(250px, 0, 0);
  -webkit-transform: translate3d(250px, 0, 0);
  -moz-transform: translate3d(250px, 0, 0);
  -ms-transform: translate3d(250px, 0, 0);
  -o-transform: translate3d(250px, 0, 0);
}

.sub-nav,
.sub-nav2,
.sub-nav3,
.sub-nav4,
.sub-nav5,
.sub-nav6,
.sub-nav7,
.sub-nav8 {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sub-nav li,
.sub-nav2 li,
.sub-nav3 li,
.sub-nav4 li,
.sub-nav5 li,
.sub-nav6 li,
.sub-nav7 li,
.sub-nav8 li {
  font-size: 14px;
  color: #fff;
  list-style: none;
  padding: 8px 15px 8px 30px;
}

#sidebarCollapse-mobile {
  display: none;
  background-color: transparent;
  border: none;
  font-size: 28px;
  color: #fff;
  vertical-align: middle;
  margin-right: 25px;
  outline: none;
  cursor: pointer;
}

@media (max-width: 767px) {
  #sidebar {
    min-width: 0px;
    max-width: 0px;
    text-align: center;
  }
  #sidebar.collapse-sidebar {
    min-width: 250px;
    max-width: 250px;
    text-align: left;
    z-index: 1;
  }
  #sidebar .sidebar-header img {
    width: 40px;
  }
  #sidebar.collapse-sidebar .sidebar-header img {
    width: 100px;
  }
  #sidebar ul.list-unstyled li a {
    height: 60px;
    padding: 20px 0;
  }
  #sidebar.collapse-sidebar ul.list-unstyled li a {
    height: 40px;
    padding: 8px 25px;
  }
  #sidebar ul.list-unstyled li a i {
    font-size: 18px;
    width: 20px;
    margin-right: 0;
  }
  #sidebar.collapse-sidebar ul.list-unstyled li a i {
    font-size: 16px;
    width: 18px;
    margin-right: 15px;
  }
  #sidebar ul.list-unstyled li:first-child a i {
    font-size: 20px;
  }
  #sidebar.collapse-sidebar ul.list-unstyled li:first-child a i {
    font-size: 18px;
  }
  #sidebar ul.list-unstyled li a span.sidebar-menu-text {
    display: none;
  }
  #sidebar.collapse-sidebar ul.list-unstyled li a span.sidebar-menu-text {
    display: inline-block;
  }
  *#layout-admin {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
    width: calc(100% - 0px);
  }
  #layout-admin.collapse-sidebar {
    width: calc(100% - 0px);
    transform: translate3d(0px, 0, 0);
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -ms-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
  }
  #layout-admin .header .header-left .title {
    font-size: 16px;
  }
  #layout-admin .header .header-right a {
    font-size: 22px;
  }
  #username {
    font-size: 14px;
  }
  #sidebar.collapse-sidebar #sidebarCollapse-mobile {
    display: inline-block;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="shortcut icon" href="/favicon.ico" sizes="32x32">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  <script
 src="http://code.jquery.com/jquery-3.2.1.min.js"
 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
 crossorigin="anonymous"></script>
</head>

<body>
  <nav id="sidebar">
    <!--------------------- Sidebar header  ---------------------------->
    <div class="sidebar-header">
      <a href="#"><img src="/common/images/logo.svg" alt="logo"></a>
      <button type="button" id="sidebarCollapse-mobile" class="show-sidebar">
                        <i class="fa fa-bars"></i>
                    </button>
    </div>
    <!--------------------- Sidebar menu  ---------------------------->
    <ul class="list-unstyled nav-links">
      <li class="active">
        <a href="#">
          <i class="fa fa-home" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Home</span>
        </a>
      </li>
      <li id="li-pendingorders">
        <a href="javascript:void(0)" class="has-sub open-dropdown">
          <i class="fas fa-box-open" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Pending Orders</span>
        </a>
        <ul class="sub-nav" style="display: none;">
          <li id="li-collectorders" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-crosshairs"></span> Collect orders</a>
          </li>
          <li id="li-addneworder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-box-open"></span> Partial collect</a>
          </li>
          <li id="li-warehousecollect" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-warehouse"></span> Warehouse collect</a>
          </li>
          <li id="li-outofstock" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-surprise"></span> Out of Stock</a>
          </li>
          <li id="li-ordered" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-thumbtack "></span> Ordered</a>
          </li>
          <li id="li-rts" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-recycle"></span> RTS</a>
          </li>
          <li id="li-awaitinglist" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-pause-circle"></span> Awaiting List</a>
          </li>
        </ul>
      </li>
      <li id="li-manageorders">
        <a href="javascript:void(0)" class="has-sub3 open-dropdown">
          <i class="fa fa-tasks" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Manage Orders</span>
        </a>
        <ul class="sub-nav3" style="display: none;">
          <li id="li-addneworder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-eye"></span> View Order</a>
          </li>
          <li id="li-warehousecollect" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-plus"></span> Create Order</a>
          </li>
        </ul>
      </li>
      <li id="li-packorders">
        <a href="javascript:void(0)" class="has-sub5 open-dropdown">
          <i class="fa fa-tape" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Pack Orders</span>
        </a>
        <ul class="sub-nav5" style="display: none;">
          <li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tape"></span> Pack Orders</a>
          </li>
        </ul>
      </li>

      <li id="li-manageinventory">
        <a href="javascript:void(0)" class="has-sub7 open-dropdown">
          <i class="fa fa-table" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Manage Inventory</span>
        </a>
        <ul class="sub-nav7" style="display: none;">
          <li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-sliders-h"></span> Adjust Stock</a>
          </li>
          <li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-truck-loading"></span> Receive Stock</a>
          </li>
          <li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-dolly"></span> Ship Stock</a>
          </li>
          <li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-map-marked-alt"></span> Locations</a>
          </li>
        </ul>
      </li>

      <li id="li-orderdownload">
        <a href="#">
          <i class="fa fa-download" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Download Orders</span>
        </a>
      </li>
      <li id="li-tracking">
        <a href="javascript:void(0)" class="has-sub2 open-dropdown">
          <i class="fas fa-shipping-fast" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Tracking</span>
        </a>
        <ul class="sub-nav2" style="display: none;">
          <li id="li-markorderassent" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-truck"></span> Mark Order as Sent</a>
          </li>
          <li id="li-downloatrackings" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-arrow-down"></span> Download Trackings</a>
          </li>
          <li id="li-uploadtrackings" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-arrow-up"></span> Upload Trackings</a>
          </li>
        </ul>
      </li>
      <li id="labels">
        <a href="javascript:void(0)" class="has-sub4 open-dropdown">
          <i class="fas fa-tags"></i>
          <span class='sidebar-menu-text'>Labels</span>
        </a>
        <ul class="sub-nav4" style="display: none;">
          <li id="li-createlabels" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tag"></span> Create Labels</a>
          </li>
          <li id="li-morelabels" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tags"></span> More Labels (template)</a>
          </li>
        </ul>
      </li>
      <li id="refunds">
        <a href="#">
          <i class="fas fa-money-bill-wave"></i>
          <span class='sidebar-menu-text'>Refunds</span>
        </a>
      </li>
      <li id="manageadm">
        <a href="javascript:void(0)" class="has-sub6 open-dropdown">
          <i class="fas fa-users-cog" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Admin</span>
        </a>
        <ul class="sub-nav6" style="display: none;">
          <li id="li-usermanagement" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-user-cog"></span> User Management</a>
          </li>
          <li id="li-packermanagement" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-toolbox"></span> Packer Management</a>
          </li>
        </ul>
      </li>

    </ul>
  </nav>
</body>

</html>

共有1个答案

从劲
2023-03-14

你的代码有很多可重用的代码，试试这个。

$(document).ready(function() {
        "use strict"; // Start of use strict
  
        $('.show-sidebar').on('click', function() {
          $('#sidebar').toggleClass('collapse-sidebar');
          $('#layout-admin').toggleClass('collapse-sidebar');
        });
        $('li a.has-sub').on('click', function() {
          // For toggle its own li
          $(this).toggleClass('open-dropdown');
          $(this).parent().find('.sub-nav').slideToggle("slow");

          // For other li
          $(this).parent().siblings().children('a.has-sub').removeClass('open-dropdown');
          $(this).parent().siblings().children('ul.sub-nav').slideUp("slow");
        });
  });
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  color: #000;
  background-color: #fff;
  margin: 0;
  line-height: 1.42857143;
  font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif;
}

body {
  font-size: 14px;
  color: #000;
  background-color: #fff;
  margin: 0;
  line-height: 1.42857143;
  font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif;
}


/*============================
Header
============================*/

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

ul li a .icon {
  height: 40px;
  width: 40px;
  margin-right: 13px;
  background: #ffffff1a;
  display: flex;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
}

ul li a .icon span {
  line-height: 40px;
  font-size: 20px;
  color: #b0b3b8;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

span.field-requried {
  color: red;
}

.hide {
  display: none;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-image: linear-gradient(to bottom, #000, #333);
  transition: all 0.3s;
  position: fixed;
  top: 0;
  height: 100vh;
}

#sidebar .sidebar-header {
  padding: 15px 5px;
  text-align: center;
  height: 60px;
}

#sidebar .sidebar-header img {
  width: 100px;
  height: auto;
  vertical-align: middle;
}

#sidebar ul.list-unstyled li {
  margin-bottom: 10px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

#sidebar ul.list-unstyled li a {
  height: 40px;
  padding: 8px 25px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.1px;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
}

#sidebar ul.list-unstyled li a.has-sub::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub2::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub3::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub4::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub5::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub6::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub7::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub8::after {
  content: "\f104";
  font-family: 'FontAwesome';
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  position: absolute;
  right: 15px;
}

#sidebar ul.list-unstyled li a.has-sub.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub2.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub3.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub4.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub5.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub6.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub7.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a.has-sub8.open-dropdown:after {
  content: "\f107";
}

#sidebar ul.list-unstyled li a i {
  font-size: 16px;
  width: 18px;
  text-align: center;
  margin-right: 15px;
}

#sidebar ul.list-unstyled li:first-child a i {
  font-size: 18px;
}

#sidebar ul.list-unstyled li:hover,
#sidebar ul.list-unstyled li.active {
  background-color: rgba(255, 255, 255, 0.15);
}

#sidebar.collapse-sidebar {
  min-width: 50px;
  max-width: 50px;
  text-align: center;
}

#sidebar.collapse-sidebar .sidebar-header img {
  width: 40px;
}

#sidebar ul.list-unstyled {
  padding: 0;
  margin: 0;
  list-style: none;
}

#sidebar.collapse-sidebar ul.list-unstyled li a {
  height: 60px;
  padding: 20px 0;
}

#sidebar.collapse-sidebar ul.list-unstyled li a i {
  font-size: 18px;
  width: 20px;
  margin-right: 0;
}

#sidebar.collapse-sidebar ul.list-unstyled li a span.sidebar-menu-text {
  display: none;
}

#sidebar.collapse-sidebar ul.list-unstyled li:first-child a i {
  font-size: 20px;
}

#layout-admin {
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
  width: calc(100% - 50px);
  min-height: 100vh;
  transition: all 0.3s;
  background-color: #f5f7f9;
}

#layout-admin .header {
  height: 60px;
  background-color: rgb(232, 2, 21);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px 0 15px;
  position: sticky;
  z-index: 10;
  top: 0;
  width: 100%;
}

#layout-admin .header .header-left {
  font-size: 0;
}

#layout-admin .header .header-right>div {
  display: inline-block;
}

#layout-admin .header .header-right a {
  font-size: 28px;
  color: #fff;
}

#username {
  font-size: 20px;
  vertical-align: middle;
  padding-bottom: 10px;
  margin-right: 10px;
}

#layout-admin .header .header-right .setting {
  margin-right: 40px;
}

#layout-admin .header .header-left button.show-sidebar {
  background-color: transparent;
  border: none;
  font-size: 28px;
  color: #fff;
  /*-webkit-text-stroke: 1.5px white;*/
  display: inline-block;
  vertical-align: middle;
  margin-right: 25px;
  outline: none;
  cursor: pointer;
}

#layout-admin .header .header-left .logo {
  display: inline-block;
  vertical-align: middle;
}

#layout-admin .header .header-left .title {
  display: inline-block;
  vertical-align: middle;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

#layout-admin .header .header-left .title span {
  font-weight: normal;
}

#layout-admin .content-admin {
  padding: 20px;
}

#layout-admin .content-admin .title-content {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 30px;
}

#layout-admin.collapse-sidebar {
  width: calc(100% - 250px);
  transform: translate3d(250px, 0, 0);
  -webkit-transform: translate3d(250px, 0, 0);
  -moz-transform: translate3d(250px, 0, 0);
  -ms-transform: translate3d(250px, 0, 0);
  -o-transform: translate3d(250px, 0, 0);
}

.sub-nav,
.sub-nav2,
.sub-nav3,
.sub-nav4,
.sub-nav5,
.sub-nav6,
.sub-nav7,
.sub-nav8 {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sub-nav li,
.sub-nav2 li,
.sub-nav3 li,
.sub-nav4 li,
.sub-nav5 li,
.sub-nav6 li,
.sub-nav7 li,
.sub-nav8 li {
  font-size: 14px;
  color: #fff;
  list-style: none;
  padding: 8px 15px 8px 30px;
}

#sidebarCollapse-mobile {
  display: none;
  background-color: transparent;
  border: none;
  font-size: 28px;
  color: #fff;
  vertical-align: middle;
  margin-right: 25px;
  outline: none;
  cursor: pointer;
}

@media (max-width: 767px) {
  #sidebar {
    min-width: 0px;
    max-width: 0px;
    text-align: center;
  }
  #sidebar.collapse-sidebar {
    min-width: 250px;
    max-width: 250px;
    text-align: left;
    z-index: 1;
  }
  #sidebar .sidebar-header img {
    width: 40px;
  }
  #sidebar.collapse-sidebar .sidebar-header img {
    width: 100px;
  }
  #sidebar ul.list-unstyled li a {
    height: 60px;
    padding: 20px 0;
  }
  #sidebar.collapse-sidebar ul.list-unstyled li a {
    height: 40px;
    padding: 8px 25px;
  }
  #sidebar ul.list-unstyled li a i {
    font-size: 18px;
    width: 20px;
    margin-right: 0;
  }
  #sidebar.collapse-sidebar ul.list-unstyled li a i {
    font-size: 16px;
    width: 18px;
    margin-right: 15px;
  }
  #sidebar ul.list-unstyled li:first-child a i {
    font-size: 20px;
  }
  #sidebar.collapse-sidebar ul.list-unstyled li:first-child a i {
    font-size: 18px;
  }
  #sidebar ul.list-unstyled li a span.sidebar-menu-text {
    display: none;
  }
  #sidebar.collapse-sidebar ul.list-unstyled li a span.sidebar-menu-text {
    display: inline-block;
  }
  *#layout-admin {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
    width: calc(100% - 0px);
  }
  #layout-admin.collapse-sidebar {
    width: calc(100% - 0px);
    transform: translate3d(0px, 0, 0);
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -ms-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
  }
  #layout-admin .header .header-left .title {
    font-size: 16px;
  }
  #layout-admin .header .header-right a {
    font-size: 22px;
  }
  #username {
    font-size: 14px;
  }
  #sidebar.collapse-sidebar #sidebarCollapse-mobile {
    display: inline-block;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="shortcut icon" href="/favicon.ico" sizes="32x32">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  <script
 src="http://code.jquery.com/jquery-3.2.1.min.js"
 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
 crossorigin="anonymous"></script>
</head>

<body>
  <nav id="sidebar">
    <!--------------------- Sidebar header  ---------------------------->
    <div class="sidebar-header">
      <a href="#"><img src="/common/images/logo.svg" alt="logo"></a>
      <button type="button" id="sidebarCollapse-mobile" class="show-sidebar">
                        <i class="fa fa-bars"></i>
                    </button>
    </div>
    <!--------------------- Sidebar menu  ---------------------------->
    <ul class="list-unstyled nav-links">
      <li class="active">
        <a href="#">
          <i class="fa fa-home" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Home</span>
        </a>
      </li>
      <li id="li-pendingorders">
        <a href="javascript:void(0)" class="has-sub">
          <i class="fas fa-box-open" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Pending Orders</span>
        </a>
        <ul class="sub-nav" style="display: none;">
          <li id="li-collectorders" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-crosshairs"></span> Collect orders</a>
          </li>
          <li id="li-addneworder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-box-open"></span> Partial collect</a>
          </li>
          <li id="li-warehousecollect" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-warehouse"></span> Warehouse collect</a>
          </li>
          <li id="li-outofstock" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-surprise"></span> Out of Stock</a>
          </li>
          <li id="li-ordered" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-thumbtack "></span> Ordered</a>
          </li>
          <li id="li-rts" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-recycle"></span> RTS</a>
          </li>
          <li id="li-awaitinglist" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-pause-circle"></span> Awaiting List</a>
          </li>
        </ul>
      </li>
      <li id="li-manageorders">
        <a href="javascript:void(0)" class="has-sub">
          <i class="fa fa-tasks" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Manage Orders</span>
        </a>
        <ul class="sub-nav" style="display: none;">
          <li id="li-addneworder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-eye"></span> View Order</a>
          </li>
          <li id="li-warehousecollect" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-plus"></span> Create Order</a>
          </li>
        </ul>
      </li>
      <li id="li-packorders">
        <a href="javascript:void(0)" class="has-sub">
          <i class="fa fa-tape" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Pack Orders</span>
        </a>
        <ul class="sub-nav" style="display: none;">
          <li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tape"></span> Pack Orders</a>
          </li>
        </ul>
      </li>

      <li id="li-manageinventory">
        <a href="javascript:void(0)" class="has-sub">
          <i class="fa fa-table" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Manage Inventory</span>
        </a>
        <ul class="sub-nav" style="display: none;">
          <li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-sliders-h"></span> Adjust Stock</a>
          </li>
          <li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-truck-loading"></span> Receive Stock</a>
          </li>
          <li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-dolly"></span> Ship Stock</a>
          </li>
          <li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-map-marked-alt"></span> Locations</a>
          </li>
        </ul>
      </li>

      <li id="li-orderdownload">
        <a href="#">
          <i class="fa fa-download" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Download Orders</span>
        </a>
      </li>
      <li id="li-tracking">
        <a href="javascript:void(0)" class="has-sub">
          <i class="fas fa-shipping-fast" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Tracking</span>
        </a>
        <ul class="sub-nav" style="display: none;">
          <li id="li-markorderassent" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-truck"></span> Mark Order as Sent</a>
          </li>
          <li id="li-downloatrackings" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-arrow-down"></span> Download Trackings</a>
          </li>
          <li id="li-uploadtrackings" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-arrow-up"></span> Upload Trackings</a>
          </li>
        </ul>
      </li>
      <li id="labels">
        <a href="javascript:void(0)" class="has-sub">
          <i class="fas fa-tags"></i>
          <span class='sidebar-menu-text'>Labels</span>
        </a>
        <ul class="sub-nav" style="display: none;">
          <li id="li-createlabels" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tag"></span> Create Labels</a>
          </li>
          <li id="li-morelabels" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tags"></span> More Labels (template)</a>
          </li>
        </ul>
      </li>
      <li id="refunds">
        <a href="#">
          <i class="fas fa-money-bill-wave"></i>
          <span class='sidebar-menu-text'>Refunds</span>
        </a>
      </li>
      <li id="manageadm">
        <a href="javascript:void(0)" class="has-sub">
          <i class="fas fa-users-cog" aria-hidden="true"></i>
          <span class='sidebar-menu-text'>Admin</span>
        </a>
        <ul class="sub-nav" style="display: none;">
          <li id="li-usermanagement" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-user-cog"></span> User Management</a>
          </li>
          <li id="li-packermanagement" style="margin-top: 0px;margin-bottom: 0px;">
            <a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-toolbox"></span> Packer Management</a>
          </li>
        </ul>
      </li>

    </ul>
  </nav>
</body>

</html>
 类似资料：
  • 静态下拉菜单到动态下拉菜单Coldfusion

    问题内容： 我是堆栈溢出的新手。我需要创建一个静态下拉列表，然后根据在静态下拉列表中选择的值创建一个动态下拉列表。只是Coldfusion和html。没有其他花哨的东西。因此，从第一个下拉菜单中，用户将选择：颜色，ID，官员，学校，然后点击“继续”按钮 然后在同一页面或不同页面上，如果选择了颜色，它将在数据库中进行查询并给出不同颜色的结果，如果选择了id，则将提供查询中的ID编号列表。如果选择了这

  • CSS下拉菜单

    问题内容： 我正在尝试制作一个简单的CSS下拉菜单，当您将鼠标悬停在链接上时，将显示子菜单。当您将鼠标悬停在li上时，我已经设法实现了这一点，但无法弄清楚如何使用链接来实现。 我之所以尝试使用链接而不是li来执行此操作，是因为我的菜单宽度为100％，并且li所占的面积比链接大，因此，如果将鼠标悬停在该区域上，则不显示该子菜单不想。 我的CSS如下： 问题答案： 如果可能的话，我会避免使用JS。这不

  • Bootstrap 下拉菜单

    主要内容：用法,实例,实例,选项,方法,实例Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。 如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的

  • Bootstrap 下拉菜单

    主要内容：实例,选项,实例,实例,更多实例本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。 如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单： 实例 <div class="dropdown"> <button type="button" c

  • Bootstrap4 下拉菜单

    主要内容：实例,实例,下拉菜单中的分割线,实例,下拉菜单中的标题,实例,下拉菜单中的可用项与禁用项,实例,下拉菜单的定位,实例,下拉菜单弹出方向设置,实例,实例,实例,下拉菜单设置文本,实例,按钮中设置下拉菜单,实例,实例Bootstrap4 下拉菜单依赖于 popper.min.js。 下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。 实例 <div class="dropdown"> <button type="button" class="btn btn-primary dropdo

  • DropdownMenu 下拉菜单

    介绍 向下弹出的菜单列表。 引入 import { createApp } from 'vue'; import { DropdownMenu, DropdownItem } from 'vant'; const app = createApp(); app.use(DropdownMenu); app.use(DropdownItem); 代码演示 基础用法 <van-dropdown-me

相关问答

当用户使用Javascript在外部单击时关闭下拉菜单单击某个元素时，引导下拉菜单无法关闭引导类下拉菜单右下拉菜单不适用于自定义子菜单WordPress下拉菜单问题下拉菜单向右移动

相关文章

selenium2的javascript下拉菜单Jenkins插件下拉菜单Bootstrap下拉菜单样式Bootstrap3多级下拉菜单根据先前的下拉菜单选择显示第二个下拉菜单

相关阅读

2.6.2 菜单(Menu)JavaFX菜单(Menu)ionic 下拉刷新ionic 侧栏菜单Eclipse 导航菜单

相关工具

动态下拉菜单滚动菜单四格菜单旋转菜单iOS 下拉列表

相关文档

Git 菜单下一代 Web 框架 Koa鸟哥的 Linux 私房菜：基础学习篇 第四版活学活用 wxPythonMarkdown 简单的世界
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.