如何使用引导程序将列表变成可折叠列表

Question

我的任务是创建移动视图，在移动设备上看起来应该像。我有义务使用引导程序，但是我不知道如何创建此功能。我不明白，没有任何jQuery，如何在设备宽度更改时添加折叠类或折叠这些项目。我尝试使用面板，但是即使在文档中的示例中一切正常，它们甚至都无法以某种方式切换。这是我的HTML：

<div class='panel-group' id='my-accordion'>
    <div class='panel panel-primary'>
        <div class='panel-heading'>
            <h3 class='panel-title' data-target='#panel-1' data-toggle='collapse'>Store & Sites</h3>
            <div class='panel-collapse collapse' id='panel-1'>
                <div class='panel-body'>
                    <ul>
                        <li>Our Store</li>
                        <li>Site Map</li>
                        <li>Terms of use</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

请给我一些想法。

PS：我们正在项目中使用第三版。

Answer 1

您的代码很好，但是您需要以正确的顺序包括脚本：

1. Bootstrap CSS
2. jQuery
3. jQuery Bootstrap JS

例如：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>