时间戳

首页 > 解决方案 > 如何使用引导程序将列表转换为可折叠列表

jquery - 如何使用引导程序将列表转换为可折叠列表

问题描述

我有创建移动视图的任务，这个菜单的它应该看起来像那在移动设备上。我有义务使用引导程序，但我不知道如何创建此功能。我不明白如何在没有任何 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：我们在项目中使用了第三个版本。

标签： jqueryhtmlcsstwitter-bootstrapcollapse

解决方案

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

  1. 引导 CSS
  2. jQuery
  3. jQuery 引导 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>

可能的 CSS 解决方案：

@media screen and (min-width: 768px) {
  .panel-title {
    pointer-events: none;
  }
  .panel-collapse.collapse:not(.show) {
    display: block;
  }
}

推荐阅读