Bootstrap Popover 内的手风琴

Question

我已经尝试并尝试弄清楚如何让手风琴在弹出框内工作。我似乎无法弄清楚。示例手风琴在不在弹出框内时也能正常工作。我在下面添加了一些示例代码。感谢任何帮助。

<div class="hidden-md hidden-lg" style="float: right; padding: 15px 0px 15px 15px;">
<a data-placement="bottom" data-toggle="popover" data-container="body" type="button" data-html="true" href="#"><i class="fa fa-chevron-right"></i> FILTERED BY</a>


    <div id="popover-content" class="hide">

        <div class="panel-group" id="accordion">
            <!-- accordion 1 -->
            <div class="panel panel-primary">

                <div class="panel-heading">
                    <!-- panel-heading -->
                    <h4 class="panel-title">
                        <!-- title 1 -->
                        <a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">
                            Collapsible Accordion 1
                        </a>
                    </h4>
                </div>
                <!-- panel body -->
                <div id="accordionOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat
                    </div>
                </div>
            </div>

            <div class="panel panel-success">
                <!-- accordion 2 -->

                <div class="panel-heading">
                    <h4 class="panel-title">
                        <!-- title 2 -->
                        <a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">
                            Collapsible Accordion 2
                        </a>
                    </h4>
                </div>
                <!-- panel body -->
                <div id="accordionTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        Change does not roll in on the wheels of inevitability,
                        but comes through continuous struggle.
                        And so we must straighten our backs and work for
                        our freedom. A man can't ride you unless your back is bent.
                    </div>
                </div>

            </div>

            <div class="panel panel-warning">
                <!-- accordion 3 -->

                <div class="panel-heading">
                    <h4 class="panel-title">
                        <!-- title 3 -->
                        <a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">
                            Collapsible Accordion 3
                        </a>
                    </h4>
                </div>

                <div id="accordionThree" class="panel-collapse collapse">
                    <!-- panel body -->
                    <div class="panel-body">
                        You must take personal responsibility.
                        You cannot change the circumstances,
                        the seasons, or the wind, but you can change yourself.
                        That is something you have charge of.
                    </div>

                </div>

            </div>

        </div>

    <script type="text/javascript">
        $("[data-toggle=popover]").popover({
            html: true,
            content: function() {
                var clone = $('#popover-content').clone(true).html();
                return clone;
            }
        });
    </script>

</div>

<div style="border-top: solid 1px #aaaaaa; clear: both;" class="hidden-md hidden-lg"><br/><br/>
</div>
</div>

Answer 1

这是给你的demo

尽管您可能需要更改一些 css，但您会明白的。

这是html那个

的代码

<div class="container-fluid">
  <div class="row-fluid" style="margin-top:200px">
    <div class="span12" style="float: middle; margin: 15px 0px 15px 15px;">
   <a href="#" id="popoverExampleTwo">Popover Example 2</a>


      <div id="popoverExampleTwoHiddenContent" style="display: none">
         <div class="panel-group" id="accordion">
        <!-- accordion 1 -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <!-- panel-heading -->
                 <h4 class="panel-title">
                    <!-- title 1 -->
                    <a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">
                        Collapsible Accordion 1
                    </a>
                </h4>

            </div>
            <!-- panel body -->
            <div id="accordionOne" class="panel-collapse collapse in">
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
            </div>
        </div>
        <div class="panel panel-success">
            <!-- accordion 2 -->
            <div class="panel-heading">
                 <h4 class="panel-title">
                    <!-- title 2 -->
                    <a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">
                        Collapsible Accordion 2
                    </a>
                </h4>

            </div>
            <!-- panel body -->
            <div id="accordionTwo" class="panel-collapse collapse">
                <div class="panel-body">Change does not roll in on the wheels of inevitability, but comes through continuous struggle. And so we must straighten our backs and work for our freedom. A man can't ride you unless your back is bent.</div>
            </div>
        </div>
        <div class="panel panel-warning">
            <!-- accordion 3 -->
            <div class="panel-heading">
                 <h4 class="panel-title">
                    <!-- title 3 -->
                    <a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">
                        Collapsible Accordion 3
                    </a>
                </h4>

            </div>
            <div id="accordionThree" class="panel-collapse collapse">
                <!-- panel body -->
                <div class="panel-body">You must take personal responsibility. You cannot change the circumstances, the seasons, or the wind, but you can change yourself. That is something you have charge of.</div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $("[data-toggle=popover]").popover({
            html: true,
            content: function() {
                var clone = $('#popover-content').clone(true).html();
                return clone;
            }
        });
    </script>
</div>

      </div> 
      <div id="popoverExampleTwoHiddenTitle" style="display: none">
         Popover Example <b>2</b> - Title
      </div>  

    </div>
  </div>
</div>

还有一些 script 用于在弹出窗口中设置标题和内容 body

$(function(){

// Enabling Popover Example 1 - HTML (content and title from html tags of element)
$("[data-toggle=popover]").popover();

// Enabling Popover Example 2 - JS (hidden content and title capturing)
$("#popoverExampleTwo").popover({
    html : true, 
    content: function() {
      return $('#popoverExampleTwoHiddenContent').html();
    },
    title: function() {
      return $('#popoverExampleTwoHiddenTitle').html();
    }
  });

});

我也只是通过javascript处理了popover的内容，我不太会解释，但是看demo你就会明白了。

希望能回答问题

Bootstrap Popover 内的手风琴

Bootstrap Accordion inside Popover

html

css

twitter-bootstrap

accordion

popover