javascript - 在引导程序中隐藏和显示按钮
问题描述
开发人员我在这里遇到了隐藏和显示按钮的问题。
<!-- 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>
我创建了一个文件夹和上传文件按钮,我希望它们在某种导航中。我面临的问题是,当我单击“创建文件夹”时,它会显示,但是当我单击“上传文件”按钮时,它将显示而不隐藏创建文件夹中的信息。我试图让它像显示和隐藏当其中任何一个被点击但没有这样做时。任何帮助表示赞赏。
解决方案
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>
推荐阅读
- wordpress - 子域中用于在线售票的不同 WordPress 主题
- python - 为 pandas.io.json_normalize 提供默认值
- python - 如何使用 Numpy 更改以零结尾的字节值?
- android - 实现类似 Delivery 应用的地图设计的 Swiggy
- ios - 在 Safari 移动版中从控制台打开链接
- css - CSS 释放空间时向左或向右扩展网格项目
- javascript - 使用 JQuery 和 Javascript 中的 if 语句在 .html 中编写
- r - 循环 data.table R 中的列
- typescript - 引导可执行脚本的 Nest.js 依赖树(没有服务器)
- pdf - 为什么 Ghostscript 不适用于某些 pdf