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 上的相同函数。

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

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

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>

Answer 4

它是由javascript编写的。重新渲染输入时，您将显示设置为“阻止”。将显示设置为“flex”

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，但随后更改为块强> 代替。

<p>Light content</p>
<custom-container-a border></custom-container-a>
<custom-container-b></custom-container-b>
<custom-container-c></custom-container-c>

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>

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

6 个答案: