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

サイドバーのリストがドロップダウンしていますが、リストアイテムを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

出典

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

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

答えて

関連する問題