twitter-bootstrap - 单击按钮即可显示新的 Bootstrap 表单

Question

我有一个 Bootstrap 按钮。单击该按钮时，我需要在按钮下方显示一个表单或文本区域。

如果在单击按钮之前按钮下方有任何组件，则应将它们移动到要显示的新表单/文本区域下方。

您能指导我如何在 Bootstrap 中实现这一点吗？

Answer 1

您可以使用Bootstrap 4来实现这一目标。

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-
</button>

<div class="collapse" id="collapseExample">
  <form>
    <input type="text">
  </form>
</div>

或者你可以使用 jQuery $( "#button" ).append( "<form>Your form</form>" );

Bootstrap 还在底层使用了 jQuery。使用第一个选项可以切换表单，而第二个选项将继续添加表单。