我创建了一个手风琴,当我展开显示减号( - )时,当我折叠它时,它显示加号(+)。
现在我想在手风琴主面板中添加一个帮助图标。单击帮助图标后,它应显示一个弹出窗口(单击图标后不展开或折叠手风琴)。
有可能吗?怎么样?我使用bootstrap和jQuery。
<div class="panel-group" id="parent_accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#parent_accordion" href="#collapseONE">
Accordion main panel
</a>
</h4>
</div><!--/.panel-heading -->
<div id="collapseONE" class="panel-collapse collapse in">
<div class="panel-body">
Welocme Here
</div><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
答案 0 :(得分:0)
我还没有完成造型。根据您的需要做样式
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#parent_accordion" href="#collapseONE">Accordion main panel</a>
在此之后添加
<a class="btn btn-default" href="#panel-config" data-toggle="modal"><i class="fa fa-wrench"></i></a>
</h4>
制作模态后
<div class="modal fade" id="panel-config" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title">Panel Configuration</h4>
</div>
<div class="modal-body">
Here will be a configuration form
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>