我的目的是显示:无“ 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>
问题在于,即使显示:无,第一个块也不会消失(我不希望左侧有可用空间)。
非常重要的一点是,当达到“ md”断点时,我希望所有块都可见。这就是为什么我在CSS @media(最大宽度:576像素)中为DIV1和DIV2使用媒体查询的原因。
最佳答案
首先,您的CSS
类有问题。的应该像:
.DIV1.openFrame {
display:flex;
}
...
注意
DIV1
前面的点。这是必需的,因为DIV1
是类,而不是HTML-Tag(例如:<DIV1></DIV1>
)。下一个问题是,您在函数的每一行都缺少了
;
function toggleMenu() {
$(".DIV1").toggleClass("openFrame");
...
最后但并非最不重要的一点是,不需要创建新的类,因为您可以
d-flex
使用bootstrap4来使用d-none
。您将
d-flex
赋予要最初显示的div,将d-none
赋予要隐藏的div。之后,您可以在函数中切换两个类。这是一个工作示例:
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>
关于jquery - Bootstrap 4-通过单个按钮操作显示一个div并隐藏另一个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59179788/