我可以改变引导崩溃,只显示/展开时,单击一个图标
Can I change bootstrap collapse to only show/expand when clicking an icon?
我正在制作一个选择框,他们可以在其中选择类别。我想让他们可以任意挑选。要做到这一点,我需要的项目不显示/隐藏时,单击任何地方,只有当单击+或-图标。希望这讲得通。我试着移动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 -->
这是一种方法…
(由@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 -->
每个可折叠区域的页眉都有一个链接。如果你把它变成一个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>
相关文章:
- 单击更改图标并通过javascript添加一个css类
- 使用Angular单击时更改特定图示符图标的颜色
- 通过单击同一图标使菜单出现和消失
- 如何制作Yii框架的linkHtmlOptions's的CGridView显示为图像图标,单击时会触发javas
- 单击时切换上下图示符图标的问题
- 单击扩展图标时打开popup.html
- Jdewit Timepicker 在文本和图标单击上显示小部件
- 单击图标后编辑信息
- 如何在单击图标时渲染图标并调用函数
- 单击图标时切换颜色
- 根据单击图标更改 IMG SCR
- 如何自动关闭并单击图标日期选择器引导程序
- j查询按钮.单击图标时删除
- 谷歌浏览器扩展程序 - 单击图标可调用函数
- javascript 可单击图标而不是弹出窗口
- 修改日期选择插件以在单击图标时弹出日历
- 如果在 HTML/JS 中单击图标,则显示弹出窗口
- 单击图标时禁用扩展
- 单击图标时更改其字体
- 无法在选择框中单击图标三角形