通过使用Bootstrap 4、如何切换某个分辨率下父级div被隐藏的div？

Question

当它在大屏幕上时，我有一个导航 div，其中包含另外五个子 div 作为五个不同的导航部分，例如

我把导航给了divclass="d-none d-lg-block"这样整个东西只会在大屏以上显示，小于大屏就隐藏

但是，在较小的屏幕上，我创建了另一个 div，其中包含一些按钮，我希望它们可以切换这些导航部分，例如

当我点击Div1时，我想要切换Div1中的内容Item1和Item2。

但是仅仅给该部分一个 id="div1" 和 class="navbar-toggler", data-toggle="collapse" and data-target="#div1" 不会让这发生。我还尝试在分辨率较小时给 div display: block 无济于事。

我这里有一个fiddle： https://jsfiddle.net/chenhang91/u8b9cwmw/

有什么好的方法可以优雅地解决这个问题？

谢谢！

Answer 1

在提供的代码中，无法在父项中显示菜单，该菜单通过 class 显式隐藏。container.d-none.d-lg-block。

我建议你重组整个html:

根本不需要额外的子菜单切换 divs .small-screen-div，子菜单的切换可以分配给 .nav-block-title。因此我们将 d-none.d-lg-block classes 移动到子菜单本身（相应地将 d-lg-block 更改为 d-lg-inline-block）

<div class="nav-block-section">
  <div class="nav-block-title d-inline-block ml-0"><a data-toggle="collapse" href="#div3">Div3</a></div>
  <div class="collapse nav-block-navs d-none d-lg-inline-block" id="div3">
<div class="pb-2">
  <a href="#">Item1</a>
  <a href="#">Item2</a>
  <a href="#">Item3</a>
  <a href="#">Item4</a>
</div>
<div>
  <a href="#">Item1</a>
  <a href="#">Item2</a>
  <a href="#">Item3</a>
  <a href="#">Item4</a>
</div>

在这种情况下，data-toggle="collapse" 需要在 css 中进行小的调整，以允许显示切换，无论现在是什么媒体查询。
```
 @media (max-width:991px) {
 .nav-block-navs.collapse.show {
   display:inline-block !important;
  }
}
```

Example

通过使用Bootstrap 4、如何切换某个分辨率下父级div被隐藏的div？

By using Bootstrap 4, how to toggle a div whose parent div is hidden under the certain resolution?

css

twitter-bootstrap

toggle

hidden