单击按钮即可显示新的引导程序表单

Question

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

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

您能指导我如何在引导程序中实现它吗？

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。使用第一个选项可以切换表单，而使用第二个选项可以继续添加表单。