數據切換崩潰不與李工作

我有一個側邊欄列表下拉，但是當我們點擊一個列表項目下拉列表其他列表不關閉。請檢查下面的代碼。數據切換崩潰不與李工作

<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>

請建議我該改變我必須做的，使這項工作

請檢查此琴也jsfiddle.net/ArunKumarUmma/Lft6hmyf

來源

2017-02-13 Arunkumar

請檢查此琴也https://jsfiddle.net/ArunKumarUmma/Lft6hmyf/ – Arunkumar

看看[本節（http://getbootstrap.com/components/#navbar），看看你可能會丟失什麼，這有點難以查明，但如果什麼都不起作用，我建議你從零開始重做它該文件的點... – webeno

你應該這樣做使用引導下拉菜單。這樣做比較容易。結帳下面

的代碼片段工作實例

<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>

來源

2017-02-13 15:56:32 neophyte

謝謝，它的正常工作 – Arunkumar

數據切換崩潰不與李工作

回答

相關問題