javascript - 数据切换折叠不适用于 li

Question

我有一个带有下拉列表的侧边栏列表，但是当我们单击一个列表项下拉列表时，其他列表不会关闭。请检查下面的代码。

<div class="sidebar-nav" id="content"   style="margin-bottom: 610px; ">

 <ul class="nav navbar-nav" >

   <li style="margin-top: 0px" >
   <a 
      data-toggle="collapse" data-target="#demo1"
      style="margin-left: 0px; margin-top:"> 
        <i class="fa fa-calendar " style="margin-right:  10px;"></i>Planning<i  
        class="fa fa-angle-left " style="margin-left:  50px;"></i>
      </a>
              <ul id="demo1" class="collapse " data-parent="#accordion">

                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     YE
                  </span><a ui-sref="">Yearly</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     MO
                  </span><a ui-sref="">Monthly</a></li>

               </ul>
    </li>
     <li style="margin-top: 0px"><a 
      data-toggle="collapse" data-target="#demo2"
      style="margin-left: 0px; margin-top:">  <i class="fa fa-book " style="margin-right:  10px;"></i>Order<i
        class="fa fa-angle-left" style="float: right !important;"></i>
      </a>
              <ul id="demo2" class="collapse " data-parent="#accordion">
              <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px; text-decoration: none ;">
                     AL
                  </span><a ui-sref="dashboard">All</a></li><br>

                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     SE
                  </span><a ui-sref="sector">Sector</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     DR
                  </span><a ui-sref="">Date Range</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     DE
                  </span>
                 <a ui-sref="">Delivered</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     PE
                  </span><a ui-sref="">Pending</a></li>

               </ul>
    </li>
    <li style="margin-top: 0px"><a 
      data-toggle="collapse" data-target="#demo3"
      style="margin-left: 0px; margin-top:">  <i class="fa fa-truck" style="margin-right:  10px;"></i>Logistics<i
        class="fa fa-angle-left" style="float: right !important;"></i>
      </a>
              <ul id="demo3" class="collapse" data-parent="#accordion">

                 <li style="margin-left: 0px"> <span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     AL
                  </span><a ui-sref="">All</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     SE
                 </span><a ui-sref="">Sector</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     CU
                  </span><a ui-sref="">Customer</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     PE
                  </span><a ui-sref="">Pending</a></li>


               </ul>
    </li>
      <li style="margin-top: 0px"><a
      data-toggle="collapse" data-target="#demo4"
      style="margin-left: 0px; margin-top:">  <i class="fa fa-truck" style="margin-right:  10px;"></i>Delivery<!-- <i
        class="fa fa-angle-left" style="float: right !important;"></i> -->
      </a>
             <!--  <ul id="demo4" class="collapse">

                 <li style="margin-left: 10px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     DL
                  </span><a ui-sref="" >Dl</a></li>



               </ul> -->
    </li>





  </ul>

请建议我需要进行哪些更改才能完成这项工作

也请检查这个 fiddle jsfiddle.net/ArunKumarUmma/Lft6hmyf

Answer 1

您应该使用 Bootstrap 下拉菜单来执行此操作。这样比较容易做到。查看下面的代码片段

工作示例

<html>
  <head>
  <meta charset="UTF-8">
        <title>Secure Login</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
         .footer {position: fixed;overflow: hidden;right: 0;bottom: 0;left: 0;z-index: 9999;}    
    </style>
  </head>
<body>

      <ul class="nav navbar-nav" >

   <li class="dropdown" style="margin-top: 0px" >
   <a class="dropdown-toggle"
      data-toggle="dropdown" 
      style="margin-left: 0px; margin-top:"> 
        <i class="fa fa-calendar " style="margin-right:  10px;"></i>Planning<i  
        class="fa fa-angle-left " style="margin-left:  50px;"></i>
      </a>
              <ul id="demo1" class="dropdown-menu">

                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     YE
                  </span><a ui-sref="">Yearly</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     MO
                  </span><a ui-sref="">Monthly</a></li>

               </ul>
    </li>
     <li class="dropdown" style="margin-top: 0px"><a  class="dropdown-toggle"
      data-toggle="dropdown" 
      style="margin-left: 0px; margin-top:">  <i class="fa fa-book " style="margin-right:  10px;"></i>Order<i
        class="fa fa-angle-left" style="float: right !important;"></i>
      </a>
              <ul id="demo2" class="dropdown-menu">
              <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px; text-decoration: none ;">
                     AL
                  </span><a ui-sref="dashboard">All</a></li><br>

                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     SE
                  </span><a ui-sref="sector">Sector</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     DR
                  </span><a ui-sref="">Date Range</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     DE
                  </span>
                 <a ui-sref="">Delivered</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     PE
                  </span><a ui-sref="">Pending</a></li>

               </ul>
    </li>
    <li class="dropdown"  style="margin-top: 0px"><a 
      class="dropdown-toggle"
      data-toggle="dropdown" 
      style="margin-left: 0px; margin-top:">  <i class="fa fa-truck" style="margin-right:  10px;"></i>Logistics<i
        class="fa fa-angle-left" style="float: right !important;"></i>
      </a>
              <ul id="demo3" class="dropdown-menu">

                 <li style="margin-left: 0px"> <span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     AL
                  </span><a ui-sref="">All</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     SE
                 </span><a ui-sref="">Sector</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     CU
                  </span><a ui-sref="">Customer</a></li><br>
                 <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     PE
                  </span><a ui-sref="">Pending</a></li>


               </ul>
    </li>
      <li class="dropdown"  style="margin-top: 0px"><a
      class="dropdown-toggle"
      data-toggle="dropdown" 
      style="margin-left: 0px; margin-top:">  <i class="fa fa-truck" style="margin-right:  10px;"></i>Delivery<!-- <i
        class="fa fa-angle-left" style="float: right !important;"></i> -->
      </a>
             <!--  <ul id="demo4" class="collapse">

                 <li style="margin-left: 10px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     DL
                  </span><a ui-sref="" >Dl</a></li>



               </ul> -->
    </li>





  </ul>
</body>
</html>