單擊圖標時，是否可以將引導程序摺疊更改爲僅顯示/展開？

Question

我正在做一種選擇框，他們可以選擇類別。我喜歡它，所以他們可以選擇任何一個項目。要做到這一點，我需要這些項目在任何地方點擊時不顯示/隱藏，只有在點擊+或 - 圖標時才能顯示/隱藏。希望這是有道理的。我試着移動數據切換=「崩潰」，以爲我可以把它放在我的圖標上，但它最終打破了。

.list-group.list-group-root { 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
.list-group.list-group-root .list-group { 
 
    margin-bottom: 0; 
 
} 
 

 
.list-group.list-group-root .list-group-item { 
 
    border-radius: 0; 
 
    border-width: 1px 0 0 0; 
 
    font-size: 18px; 
 
} 
 

 
.list-group.list-group-root > .list-group-item:first-child { 
 
    border-top-width: 0; 
 
} 
 

 
.list-group.list-group-root > .list-group > .list-group-item { 
 
    padding-left: 30px; 
 
    font-size: 16px; 
 
} 
 

 
.list-group.list-group-root > .list-group > .list-group > .list-group-item { 
 
    padding-left: 45px; 
 
    font-size: 14px; 
 
} 
 

 
.list-group-item .glyphicon { 
 
    margin-right: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="list-group list-group-root well"> 
 
    
 
     <a href="#item-1" class="list-group-item" data-toggle="collapse"> 
 
    \t <i class="fa fa-plus pull-right"></i>Item 1 
 
     </a> 
 
     <div class="list-group collapse" id="item-1"> 
 
    
 
    \t <a href="#item-1-1" class="list-group-item" data-toggle="collapse"> 
 
    \t <i class="fa fa-plus pull-right"></i>Item 1.1 
 
    \t </a> 
 
    \t <div class="list-group collapse" id="item-1-1"> 
 
    \t <a href="#" class="list-group-item">Item 1.1.1</a> 
 
    \t <a href="#" class="list-group-item">Item 1.1.2</a> 
 
    \t <a href="#" class="list-group-item">Item 1.1.3</a> 
 
    \t </div> 
 
    
 
    \t <a href="#item-1-2" class="list-group-item" data-toggle="collapse"> 
 
    \t <i class="fa fa-plus pull-right"></i>Item 1.2 
 
    \t </a> 
 
    \t <div class="list-group collapse" id="item-1-2"> 
 
    \t <a href="#" class="list-group-item">Item 1.2.1</a> 
 
    \t <a href="#" class="list-group-item">Item 1.2.2</a> 
 
    \t <a href="#" class="list-group-item">Item 1.2.3</a> 
 
    \t </div> 
 
    
 
    \t <a href="#item-1-3" class="list-group-item" data-toggle="collapse"> 
 
    \t <i class="fa fa-plus pull-right"></i>Item 1.3 
 
    \t </a> 
 
    \t <div class="list-group collapse" id="item-1-3"> 
 
    \t <a href="#" class="list-group-item">Item 1.3.1</a> 
 
    \t <a href="#" class="list-group-item">Item 1.3.2</a> 
 
    \t <a href="#" class="list-group-item">Item 1.3.3</a> 
 
    \t </div> 
 
    
 
     </div> 
 
    
 
     <a href="#item-2" class="list-group-item" data-toggle="collapse"> 
 
    \t <i class="fa fa-plus pull-right"></i>Item 2 
 
     </a> 
 
     <div class="list-group collapse" id="item-2"> 
 
    
 
    \t <a href="#item-2-1" class="list-group-item" data-toggle="collapse"> 
 
    \t <i class="fa fa-plus pull-right"></i>Item 2.1 
 
    \t </a> 
 
    \t <div class="list-group collapse" id="item-2-1"> 
 
    \t <a href="#" class="list-group-item">Item 2.1.1</a> 
 
    \t <a href="#" class="list-group-item">Item 2.1.2</a> 
 
    \t <a href="#" class="list-group-item">Item 2.1.3</a> 
 
    \t </div> 
 
    
 
    \t <a href="#item-2-2" class="list-group-item" data-toggle="collapse"> 
 
    \t <i class="fa fa-plus pull-right"></i>Item 2.2 
 
    \t </a> 
 
    \t <div class="list-group collapse" id="item-2-2"> 
 
    \t <a href="#" class="list-group-item">Item 2.2.1</a> 
 
    \t <a href="#" class="list-group-item">Item 2.2.2</a> 
 
    \t <a href="#" class="list-group-item">Item 2.2.3</a> 
 
    \t </div> 
 
    
 
    \t <a href="#item-2-3" class="list-group-item" data-toggle="collapse"> 
 
    \t <i class="fa fa-plus pull-right"></i>Item 2.3 
 
    \t </a> 
 
    \t <div class="list-group collapse" id="item-2-3"> 
 
    \t <a href="#" class="list-group-item">Item 2.3.1</a> 
 
    \t <a href="#" class="list-group-item">Item 2.3.2</a> 
 
    \t <a href="#" class="list-group-item">Item 2.3.3</a> 
 
    \t </div> 
 
    
 
     </div> 
 
    
 
    
 
     <a href="#item-3" class="list-group-item" data-toggle="collapse"> 
 
    \t <i class="fa fa-plus pull-right"></i>Item 3 
 
     </a> 
 
     <div class="list-group collapse" id="item-3"> 
 
    
 
    \t <a href="#item-3-1" class="list-group-item" data-toggle="collapse"> 
 
    \t <i class="fa fa-plus pull-right"></i>Item 3.1 
 
    \t </a> 
 
    \t <div class="list-group collapse" id="item-3-1"> 
 
    \t <a href="#" class="list-group-item">Item 3.1.1</a> 
 
    \t <a href="#" class="list-group-item">Item 3.1.2</a> 
 
    \t <a href="#" class="list-group-item">Item 3.1.3</a> 
 
    \t </div> 
 
    
 
    \t <a href="#item-3-2" class="list-group-item" data-toggle="collapse"> 
 
    \t <i class="fa fa-plus pull-right"></i>Item 3.2 
 
    \t </a> 
 
    \t <div class="list-group collapse" id="item-3-2"> 
 
    \t <a href="#" class="list-group-item">Item 3.2.1</a> 
 
    \t <a href="#" class="list-group-item">Item 3.2.2</a> 
 
    \t <a href="#" class="list-group-item">Item 3.2.3</a> 
 
    \t </div> 
 
    
 
    \t <a href="#item-3-3" class="list-group-item" data-toggle="collapse"> 
 
    \t <i class="fa fa-plus pull-right"></i>Item 3.3 
 
    \t </a> 
 
    \t <div class="list-group collapse" id="item-3-3"> 
 
    \t <a href="#" class="list-group-item">Item 3.3.1</a> 
 
    \t <a href="#" class="list-group-item">Item 3.3.2</a> 
 
    \t <a href="#" class="list-group-item">Item 3.3.3</a> 
 
    \t </div> 
 
    
 
     </div> 
 
    
 
    </div><!-- end category list -->

Answer 1

這是一個辦法做到這一點..

（由@Justin L.解釋）

.list-group.list-group-root { 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
.list-group.list-group-root .list-group { 
 
    margin-bottom: 0; 
 
} 
 

 
.list-group.list-group-root .list-group-item { 
 
    border-radius: 0; 
 
    border-width: 1px 0 0 0; 
 
    font-size: 18px; 
 
} 
 

 
.list-group.list-group-root > .list-group-item:first-child { 
 
    border-top-width: 0; 
 
} 
 

 
.list-group.list-group-root > .list-group > .list-group-item { 
 
    padding-left: 30px; 
 
    font-size: 16px; 
 
} 
 

 
.list-group.list-group-root > .list-group > .list-group > .list-group-item { 
 
    padding-left: 45px; 
 
    font-size: 14px; 
 
} 
 

 
.list-group-item .glyphicon { 
 
    margin-right: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="list-group list-group-root well"> 
 
    
 
     <span class="list-group-item" > 
 
     <a href="#item-1" data-toggle="collapse"><i class="fa fa-plus pull-right"></i></a> 1 
 
    </span> 
 
    <div class="list-group collapse" id="item-1"> 
 

 
     <span class="list-group-item" > 
 
      <a href="#item-1-1" data-toggle="collapse"><i class="fa fa-plus pull-right"></i></a>Item 1.1 
 
     </span> 
 
     <div class="list-group collapse" id="item-1-1"> 
 
      <a href="#" class="list-group-item">Item 1.1.1</a> 
 
     </div> 
 
    
 
</div><!-- end category list -->

Answer 2

你有每個c的標題可拉伸區域作爲鏈接。如果你把它轉換成一個div，並與鏈接包住你的圖標，你會得到想要的結果：

之前

<a href="#item-1" class="list-group-item" data-toggle="collapse"> 
    <i class="fa fa-plus pull-right"></i>Item 1 
</a> 

後

<div class="list-group-item"> 
    <a href="#item-1" data-toggle="collapse"><i class="fa fa-plus pull-right"></i></a>Item 1 
</div>