Question

我创建了一个手风琴，当我展开显示减号（ - ）时，当我折叠它时，它显示加号（+）。

现在我想在手风琴主面板中添加一个帮助图标。单击帮助图标后，它应显示一个弹出窗口（单击图标后不展开或折叠手风琴）。

有可能吗？怎么样？我使用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 -->

Answer 1

我还没有完成造型。根据您的需要做样式

<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>

如何在bootstrap手风琴上添加帮助图标

1 个答案: