在引导程序中隐藏和显示按钮答案

【问题标题】：hide and show buttons in bootstrap在引导程序中隐藏和显示按钮
【发布时间】：2018-07-25 16:46:10
【问题描述】：

开发者我在这里遇到了隐藏和显示按钮的问题。

    <!-- Create Folder button -->
         <li class="nav-item">
     <a href="" class="btn btn-primary btn-sm active" role="button" aria-pressed="true" onclick="document.getElementById('createFolderForm').style.display = 'block'; return false;"> <i class="far fa-folder fa-1x"></i> Create Folder</a>


    <form id="createFolderForm" action="/create-folder" method="post" style="display: none; font-size: smaller;">
        {{ csrf_field() }}
        <BR>
        <input type="hidden" name="folder" value="{{ $path }}">
        <input type="text" name="name" placeholder="Folder name" required>
        <input type="submit" value="Create" class="btn btn-success btn-sm">
    </form>
         </li>
    <br><br>

    <!-- Upload files button -->
    <li class="nav-item">
    <a href="" class="btn btn-primary btn-sm active" role="button" aria-pressed="true"  onclick="document.getElementById('uploadForm').style.display = 'block'; return false;"><i class="fas fa-cloud-upload-alt"></i> Upload File</a>

    <form id="uploadForm" action="/upload" method="post" style="display: none; font-size: smaller;" enctype="multipart/form-data">
        {{ csrf_field() }}
        <BR>
        <input type="hidden" name="folder" value="{{ $path }}">
        Select file to upload:<BR>
        <input type="file" name="file" id="fileToUpload" required>
        <BR><BR> <i class="fas fa-lock"></i>
        Encrypt
        <input type="checkbox" name="encrypt" value="1">
        <BR><BR>
        <input type="submit" value="Upload" class="btn btn-success btn-sm">
    </form>
</li>
</ul>
    <br><br>

我创建了一个文件夹和上传文件按钮，我希望它们位于某种导航中。我面临的问题是，当我单击“创建文件夹”时，它会显示，但是当我单击“上传文件”按钮时，它将显示而不隐藏创建文件夹中的信息。当其中任何一个被点击但未能这样做时，我试图让它像显示和隐藏一样。任何帮助表示赞赏。

【问题讨论】：

在实施之前仔细考虑步骤。
@TheOracle 感谢您的意见

标签： javascript html css twitter-bootstrap bootstrap-4

【解决方案1】：

单击按钮时将另一个表单设置为display: none;？

<!-- Create Folder button -->
<ul>
  <li class="nav-item">
    <a href="" class="btn btn-primary btn-sm active" role="button" aria-pressed="true" onclick="document.getElementById('createFolderForm').style.display = 'block'; document.getElementById('uploadForm').style.display = 'none'; return false;">
      <i class="far fa-folder fa-1x"></i>
      Create Folder
    </a>
    <form id="createFolderForm" action="/create-folder" method="post" style="display: none; font-size: smaller;">
    {{ csrf_field() }}
    <br>
    <input type="hidden" name="folder" value="{{ $path }}">
    <input type="text" name="name" placeholder="Folder name" required>
    <input type="submit" value="Create" class="btn btn-success btn-sm">
    </form>
  </li>

  <!-- Upload files button -->
  <li class="nav-item">
    <a href="" class="btn btn-primary btn-sm active" role="button" aria-pressed="true" onclick="document.getElementById('uploadForm').style.display = 'block'; document.getElementById('createFolderForm').style.display = 'none'; return false;">
      <i class="fas fa-cloud-upload-alt"></i>
      Upload File
    </a>
    <form id="uploadForm" action="/upload" method="post" style="display: none; font-size: smaller;" enctype="multipart/form-data">
    {{ csrf_field() }}
      <br>
      <input type="hidden" name="folder" value="{{ $path }}">
      Select file to upload:<br>
      <input type="file" name="file" id="fileToUpload" required>
      <br><br>
      <i class="fas fa-lock"></i>
      Encrypt
      <input type="checkbox" name="encrypt" value="1">
      <br><br>
      <input type="submit" value="Upload" class="btn btn-success btn-sm">
    </form>
  </li>
</ul>

【讨论】：