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

只需添加一个glyphicon（我建议glyphicon-info-sign获取帮助按钮，但这是您选择的）给您的手风琴：

<span class="pull-right glyphicon glyphicon-info-sign" 
      data-toggle="popover" 
      title="Popover Header" 
      data-placement="left" 
      data-content="Some content inside the popover"></span>

并将其放在右侧的班级pull-right。然后添加data-toggle="popover"以使用引导程序popover，将其放在左侧data-placement="left"并填充内容：data-title和data-content。

您必须使用此javascript激活popover：

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

以下是完整的HTML：

<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>
            <span class="pull-right glyphicon glyphicon-info-sign" data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover"></span>
        </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 -->

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

Answer 2

添加这个呈现图标的html标记：

<span class="ui-icon ui-icon-help"></span>

然后，此脚本会在单击图标时显示弹出窗口：

$(document).ready(function(){
    $('#hlp').on('click', function(){
            $('#dlg').dialog({autopen:true});
    });
 });

http://jsfiddle.net/mop6q6zw/

Answer 3

我相信这会照顾你想要的东西。请注意，帮助范围位于切换范围之外。

<div class="panel-group" id="parent_accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <div>
                    <span class="ui-icon ui-icon-help pull-left" onclick="test()"></span>
                    <a data-toggle="collapse" data-parent="#parent_accordion" href="#collapseONE">
                        Accordion main panel
                    </a>
                </div>

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

</body>
<script>
    function test() {
        alert("Hello");
        return (false);
    }
</script>

如何在手风琴主面板上显示帮助图标

3 个答案: