jquery - 在移动 View bootstrap3 上制作 Accordion

Question

我的应用程序中的内容太多。在 Review 部分有很多评论，我需要在移动 View 中将 div 设为 Accordion 。我该怎么做？

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

在系统 View 中它应该像内容一样显示，在移动 View 中它应该将其更改为 Accordion 。

此 View 内容上的 col-xs 和 col-sm 应更改为 Accordion。

Answer 1

如果您正在使用 bootstrap，您是否尝试遵循该示例？

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>