javascript - 将 Bootstrap 选项卡栏转换为移动尺寸的 Accordion 菜单

Question

已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足 Stack Overflow guidelines 。目前不接受答案。

---

我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便用事实和引文来回答。

已关闭 7 年前。

Improve this question

有没有办法在不添加插件的情况下将 Bootstrap 选项卡栏转换为移动尺寸的 Accordion ？

Bootstrap 垂直选项卡示例: http://www.bootply.com/74926

Answer 1

此代码将帮助其正常工作只需添加 BootStrap 和 Jquery 文件的 CDNS

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3>Tabs</h3>
            <!-- tabs -->

            <div class="tabbable" id="accordion">
                <ul class="nav nav-tabs">
                    <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a></li>
                    <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a></li>
                    <!--<li><a href="#twee" data-toggle="collapse" data-parent="#accordion" data-target="#twee">Twee</a></li>-->
                </ul>


                <div class="panel panel-default">

                    <div id="collapse1" 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-default">

                    <div id="collapse2" class="panel-collapse collapse">
                        <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>
            <!-- /tabs -->

        </div>

    </div><!-- /row -->

</div>