liにデータトグルドロップダウンを使用できますか？ブートストラップで

Question

dropdown menuをbootstrapにしています。
ここでは、liのa要素を使用して、ドロップダウンメニューを切り替える方法について説明します。

しかし、私は実際に全体liをクリッカブルにする必要がありますのでli ... にしてa要素であるものを載せていきたいと思います。

あなたは私のためにチップを持っていることを願っています。 ;）

<ul class="list-group"> 
    <li class="list-group-item"> 
     <a class="dropdown-toggle" data-toggle="dropdown"> 
      Applicatie Ontwikkeling 
     </a> 
     <ul class="dropdown-menu"> 
      <li class="list-group-item">HTML</li> 
      <li class="list-group-item">CSS</li> 
      <li class="list-group-item">jQuery</li> 
     </ul> 
    </li> 
    <li class="list-group-item">Netwerk Beheer</li> 
    <li class="list-group-item">Server Beheer</li> 
</ul> 

Answer 1

このようにドロップダウンリストを追加するliに 'dropdown'クラスを適用してください。

<ul class="list-group"> 
<li class="list-group-item dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown"> 
     Applicatie Ontwikkeling 
    </a> 
    <ul class="dropdown-menu"> 
     <li class="list-group-item">HTML</li> 
     <li class="list-group-item">CSS</li> 
     <li class="list-group-item">jQuery</li> 
    </ul> 
</li> 
<li class="list-group-item">Netwerk Beheer</li> 
<li class="list-group-item">Server Beheer</li> 

Answer 2

あなただけaタグは全幅を取り、その後、全体のLiがクリック可能になり作ることができます。

.dropdown-toggle{ 
 
display:inline-block; 
 
    width: 100%; 
 
    cursor: pointer; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<ul class="list-group"> 
 
    <li class="list-group-item"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown"> 
 
      Applicatie Ontwikkeling 
 
     </a> 
 
     <ul class="dropdown-menu"> 
 
      <li class="list-group-item">HTML</li> 
 
      <li class="list-group-item">CSS</li> 
 
      <li class="list-group-item">jQuery</li> 
 
     </ul> 
 
    </li> 
 
    <li class="list-group-item">Netwerk Beheer</li> 
 
    <li class="list-group-item">Server Beheer</li> 
 
</ul>