如何在引导中隐藏/显示输入组

Question

我试图隐藏/显示Bootstrap 5input-group，如下所示:

https://jsfiddle.net/o08r3p9u

然而，一旦隐藏，输入组在再次显示时不再正确显示。如何正确实现此功能?

function dotoggle() {
elem = document.getElementById("hideme")
if (elem.style.display == "none") {
elem.style.display = "block";
} else {
elem.style.display = "none";
}
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-3" id="hideme">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<button onclick="dotoggle()">
BUTTON
</button>

Answer 1

Bootstrap有自己的工具来隐藏和显示元素:

因此，你可以使用文档中的布局、类和数据属性，Bootstrap可以自己完成所有工作。例如:

<div class="collapse" id="collapseExample">
<div class="input-group mb-3" id="hideme">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button
</button>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

Answer 2

因为div#hideme使用flex显示(.input-group类)，但是在jquery代码中指定了elem.style.display = "block";。这是不正确的。

在jquery代码中，指定elem.style.display = "flex";，如下所示:

function dotoggle() {
elem = document.getElementById("hideme")
if (elem.style.display == "none") {
elem.style.display = "flex";
} else {
elem.style.display = "none";
}
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-3" id="hideme">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<button onclick="dotoggle()">
BUTTON
</button>

Answer 3

要解决这个问题，只需在input-groupdiv周围添加另一个容器，并运行与新主容器div相同的功能。

在这里检查JS提琴:https://jsfiddle.net/cv8oazym/7/

Answer 4

是由javascript编写的。您正在将显示设置为"block";重新呈现输入时。设置显示

function dotoggle() {
elem = document.getElementById("hideme")
if (elem.style.display == "none") {
elem.style.display = "flex";
} else {
elem.style.display = "none";
}
}

Answer 5

您的JavaScript正在应用display: block而不是display: inline-flex。

所以在开始时输入组被设置为显示:inline-flex，然后设置显示:none然后改成block相反。

function dotoggle() {
elem = document.getElementById("hideme")
if (elem.style.display == "none") {
elem.style.display = "inline-flex";
} else {
elem.style.display = "none";
}
}

Answer 6

我更喜欢使用bootstrap的崩溃类，因此不需要我们这边额外的JS。

因此是一个完全的自举解。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<div class="input-group mb-3 collapse" id="collapseExample">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
BUTTON
</button>