javascript - 使用 Bootstrap 4，如何在移动设备/平板电脑 View 中折叠侧边栏

Question

我希望在创建可折叠侧边栏方面获得一些帮助，该侧边栏在 lg 和更高的 View 上展开，但折叠时带有(现在可见)按钮以在平板电脑和移动 View (md 或更小)上展开。

所以分解一下:
- 如何让我的侧边栏在移动/平板电脑 View 上可折叠？ (xs, md, lg)
- 需要在桌面 View 中展开 (lg, xl)
- 并有一个隐藏在大型桌面 View 中的切换按钮，但在小型移动/平板电脑 View 中显示。
- 我需要编写一些自定义 JS 吗？
-此处链接的是用于折叠的 BS4 文档，但我不明白这将如何满足我的需要(https://getbootstrap.com/docs/4.0/components/collapse/#options)。也许 JS 人可以提供帮助。

感谢您的帮助!

//The Button
<h4 class="mb-3"><span class="text-muted">Search Filters</span>
    <button class="navbar-toggler border"
    type="button"
    data-toggle="collapse"
    data-target="#sidebar"
    aria-expanded="false"
    aria-label="Toggle filters">
      <span><i class="fas fa-filter"></i></span>
    </button>
 </h4>




//The Sidebar    
  <ul id="sidebar" class="list-group mb-3">
    <li class="list-group-item d-flex justify-content-between lh-condensed">
      <div>
        <h6 class="my-0">Header</h6>
        <div class="input-group mb-3">
          <ul>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
          </ul>
        </div>
    </li>
    <li class="list-group-item d-flex justify-content-between lh-condensed">
      <div>
        <h6 class="my-0">Header</h6>
        <div class="input-group mb-3">
          <ul>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
          </ul>
        </div>
    </li>
    <li class="list-group-item d-flex justify-content-between lh-condensed">
      <div>
        <h6 class="my-0">Header</h6>
        <div class="input-group mb-3">
          <ul>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
          </ul>
        </div>
    </li>
  </ul>
  </div>

Answer 1

好吧，在其他网站上的一些帮助下，我找到了解决方案。 Slack Bootstrap 的伙计们帮助 channel 通过链接 StackOverflow thread 为我指明了正确的方向。 .

使用该链接以及位于 Bootstrap 的折叠文档我能够弄清楚。下面是答案...

// Used jQuery to create the new logic:

  if ($(window).width() < 922) {
    $('#sidebar').collapse({
      toggle: false
    });
  } else {
    $('#sidebar').collapse({
      toggle: true
    });
  }


// Also, needed to add the .collapse class to the UL:

  <ul id="sidebar" class="collapse list-group mb-3">
      ....
  </ul>

我希望这可以帮助其他人!