我可以将引导程序折叠更改为仅在单击图标时显示/展开吗？

时间：2016-11-09 17:37:05

标签： javascript jquery twitter-bootstrap collapse

我正在制作一种可以选择类别的选择框。我喜欢它，所以他们可以选择任何一项。要做到这一点，我需要在点击任何地方时不显示/隐藏项目，只有在点击+或 - 图标时。希望这是有道理的。我尝试移动data-toggle =“collapse”，我想把它放在我的图标上，但它最终破了。

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

2 个答案:

答案 0 :(得分：2)

这是一种方法..

（由@Justin L。解释）

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

您将每个可折叠区域的标题作为链接。如果您将其转换为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>
相关问题
最新问题