Bootstrap 4 - 显示一个 div 并使用单个按钮操作隐藏另一个

Question

我的目的是 display:none "DIV1" 并显示 "display:flex;" "DIV2"，只需在按钮上执行一个操作。我认为最好的方法是使用这个：https://getbootstrap.com/docs/4.0/components/collapse/#multiple-targets 但我不知道该怎么做。

目前，我编写了这段代码，但我认为当我们使用 Bootstrap 时，这不是最佳实践：

CSS

@media (max-width: 576px)
DIV1.openFrame {
  display:flex;
}
@media (max-width: 576px)
DIV1.closeFrame {
  display:none;
}
@media (max-width: 576px)
DIV2.openFrame {
  display:flex;
}
@media (max-width: 576px)
DIV2.closeFrame {
  display:none;
}

JAVASCRIPT（类似这样）

function toggleMenu() {
  // Something in JQuery
  $(".DIV1").toggleClass("openFrame")
  $(".DIV2").toggleClass("closeFrame")

  // OR

  $(".DIV1").toggleClass("closeFrame")
  $(".DIV2").toggleClass("openFrame")
}

HTML

<div class="container">
  <div class="row">
    <div class="col d-flex DIV1">
      1 of 2
    </div>
    <div class="col d-flex DIV2">
      2 of 2
    </div>
  </div> 
</div>
<button class="btn" type="button" onClick="toggleMenu()">
>
</button>

JsFiddle

编辑：

我对多目标解决方案的尝试：

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse show" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

问题是第一个方块即使有 display:none 也不会消失（我不想要左边的空闲 space）。非常重要的是，我希望在到达 "md" 断点时所有块都可见。这就是为什么我在 CSS @media (max-width: 576px) 中为 DIV1 和 DIV2 使用媒体查询。

Answer 1

起初你的 CSS 类有问题。应该是这样的：

.DIV1.openFrame {
  display:flex;
}
...

note the dot infront if DIV1. This is needed since DIV1 is a class, instead of a HTML-Tag (for example: <DIV1></DIV1>).

下一个问题是，您在函数的每一行都缺少 ;

function toggleMenu() {
  $(".DIV1").toggleClass("openFrame");
  ...

最后但同样重要的是，不需要创建新的类，因为您可以 d-flex 您也可以使用 d-none 使用 bootstrap4。

you give d-flex to the div you want to show initially, and d-none to the div you want to hide. After that you could toggle both classes inside your function.

这是一个工作示例：

function toggleMenu() {
  $(".DIV1").toggleClass("d-none");
  $(".DIV2").toggleClass("d-flex");
  $(".DIV1").toggleClass("d-flex");
  $(".DIV2").toggleClass("d-none");
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col d-none DIV1">
      1 of 2
    </div>
    <div class="col d-flex DIV2">
      2 of 2
    </div>
  </div> 
</div>
<button class="btn" type="button" onClick="toggleMenu()">
>
</button>

Bootstrap 4 - 显示一个 div 并使用单个按钮操作隐藏另一个

Bootstrap 4 - Show one div and hide another one with single button action

html

css

jquery

collapse

twitter-bootstrap