【问题标题】:How to add help icon on bootstrap accordion如何在引导手风琴上添加帮助图标
【发布时间】:2015-09-24 20:59:09
【问题描述】:

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

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

有可能吗?如何?我正在使用引导程序和 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 -->

【问题讨论】:

    标签: jquery html twitter-bootstrap-3


    【解决方案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>
    

    【讨论】:

    • 它显示了两个锚标签。我只想要一个带有标题和图标的锚标签。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-10
    • 1970-01-01
    • 1970-01-01
    • 2013-07-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多