jquery - 在移动 View bootstrap3上制作 Accordion

在我的应用中，内容太多。在“评论”部分中，有很多评论，我需要在移动视图中将div折叠成手风琴。我怎样才能做到这一点？

<div class="col-xs-12">
    <h1> Heading </h1>
    <div class="col-md-10 col-xs-12 center-margin float-none no-padding">
        <div class="padding-left-30">
            <span class="pacifico pull-left padding-right-15" style="font-size:30px;">This is the best Color ever!</span>
        </div>
        <div class="padding-left-30 padding-top-15 quote">
            <P class="padding-top-15">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, explicabo? Vero voluptate harum explicabo possimus facilis aliquam iusto voluptatibus eos aspernatur ducimus velit, est. Non quos ab perspiciatis nobis possimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam cum officia quae voluptatem voluptates illo mollitia velit consequatur rerum error molestiae maiores, iusto ab natus excepturi animi alias, quam sit?</P>
        </div>
        <div class="padding-right-15-per padding-top-15">
            <p class="pull-right text-bold">Basheer Shahul</p>
        </div>
    </div>
    <div class="col-md-10 col-xs-12 center-margin float-none no-padding">
        <div class="padding-left-30">
            <span class="pacifico pull-left padding-right-15" style="font-size:30px;">This is the best Color ever!</span>
        </div>
    </div>

在系统视图中，它应显示为内容，在移动设备视图中，应将其更改为手风琴。

此视图内容上的col-xs和col-sm应该更改为“手风琴”。

最佳答案

如果您使用的是引导程序，是否尝试遵循该示例？

http://getbootstrap.com/javascript/#collapse-example-accordion

您所需要做的就是在正确的位置添加类（在折叠位置“ in”表示默认情况下他处于打开状态），这是您的代码的jsfiddle示例：

https://jsfiddle.net/DTcHh/6389/

<div class="col-xs-12 panel panel-default">
    <div class="panel-heading" role="tab" id="headingZero">
        <h1 calss="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseZero" aria-expanded="true" aria-controls="collapseZero">
            Heading
            </a>
        </h1>
    </div>
    <div class="col-md-10 col-xs-12 center-margin float-none no-padding panel-collapse collapse in"  id="collapseZero" role="tabpanel" aria-labelledby="headingZero">
      <div class="panel-body">
        <div class="padding-left-30">
            <span class="pacifico pull-left padding-right-15" style="font-size:30px;">This is the best Color ever!</span>
        </div>
        <div class="padding-left-30 padding-top-15 quote">
            <P class="padding-top-15">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, explicabo? Vero voluptate harum explicabo possimus facilis aliquam iusto voluptatibus eos aspernatur ducimus velit, est. Non quos ab perspiciatis nobis possimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam cum officia quae voluptatem voluptates illo mollitia velit consequatur rerum error molestiae maiores, iusto ab natus excepturi animi alias, quam sit?</P>
        </div>
        <div class="padding-right-15-per padding-top-15">
            <p class="pull-right text-bold">Basheer Shahul</p>
        </div>
      </div>
    </div>
</div>

关于jquery - 在移动 View bootstrap3上制作 Accordion ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29530982/