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

Question

我正在尝试隐藏/显示 Bootstrap 5 input-group，如下所示：

但是，一旦隐藏，输入组再次显示时将不再正确显示。如何正确实现此功能？

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

解决这个问题只需在 input-group div 和运行周围添加另一个容器，与新主容器 div.[=14 上的功能相同=]

这里检查 JS fiddle: https://jsfiddle.net/cv8oazym/7/

Answer 2

因为div#hideme使用flex显示（.input-groupclass），但是在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

是从javascript写的。重新呈现输入时，您将显示设置为“阻止”。将显示设置为“flex”

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

Answer 4

您的 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 5

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

因此只有 bootstrap 一个完整的解决方案。

<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>

Answer 6

Bootstrap 有自己的工具来隐藏和显示元素：Collapse。

因此您可以使用文档中的布局、类和数据属性，并且 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>

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

How can one hide / show an input-group in Bootstrap

html

javascript

css

bootstrap-5