データがトグル折りたたみがリボンで機能しない

Question

サイドバーのリストがドロップダウンしていますが、リストアイテムを1つクリックするとドロップダウンリストが閉じません。下記のコードを確認してください。

<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

Answer 1

このフィドルを確認してくださいあなたはこれを行う必要がありますブートストラップドロップダウンメニューを使用します。このようにする方が簡単です。チェックアウト

の作業例

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