javascript - 单击图标显示 div,然后再次单击隐藏 div
问题描述
我有一个带有搜索图标的导航栏。当我单击它时,我希望它显示一个具有输入和按钮的 div,如果我再次单击相同的图标,我想隐藏相同的 div。到目前为止,当我单击它时,它会显示 div,但是当我再次单击它时,它不会关闭它。
<form class="form-inline my-2 my-lg-0">
<i id="searchIcon" class="fas fa-search fa-2x"> </i>
<div style="display:none" class="input-group date" id="searchDate" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="datetimepicker6" data-toggle="datetimepicker" data-target="#datetimepicker6"/>
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</div>
<a style="color: black" href="logout.php"><i class="fas fa-sign-out-alt fa-2x"></i></a>
</form>
还有我的 javascript:
$('#searchIcon').click(function(){
console.log("searcg clicked");
this.click?$('#searchDate').show(1000):$('#searchDate').hide(1000);
});
有谁知道它为什么不关闭?
解决方案
jQuery 自带了 toggle 方法:
$('#searchIcon').click(function() {
$("#searchDate").toggle("slow");
});
@import url("https://use.fontawesome.com/releases/v5.3.1/css/all.css");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-inline my-2 my-lg-0">
<i id="searchIcon" class="fas fa-search fa-2x"> </i>
<div style="display:none" class="input-group date" id="searchDate" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="datetimepicker6" data-toggle="datetimepicker" data-target="#datetimepicker6" />
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</div>
<a style="color: black" href="logout.php"><i class="fas fa-sign-out-alt fa-2x"></i></a>
</form>
推荐阅读
- javascript - 将日期时间从 javascript 客户端发送到 ASP.NET 核心到 SQL 服务器的问题
- python - 使用 pandas 将 csv 列转换为列表
- c++ - 关于模板类语法
- json - JSON 上的 Elasticsearch 精确短语匹配
- php - php数组从其他数组中按值搜索键和值
- java - 如何将字符串响应转换为可迭代对象
- flutter - Flutter:谷歌地图底部的 Admob 横幅
- python - 要在 python 中的列表中返回的字符串元组列表
- azure - Azure DevOps - 为 UI 和 Dotnet API 层的单独代码存储库处理单一版本
- git - 尝试在项目上使用 GIT 删除了我的文件