JS显示Div需要2次点击
JS显示Div需要2次点击
提问于 2020-09-26 06:46:02
我正试图用JavaScript显示一个div，但正如标题所说，它需要2次点击才能显示出来。下面是我使用的代码，在同一个文件上用<script>标记调用JS：
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div id="mobile-search" class="mobile-search">
<input type="search" name="">
</div>
<button class="search-btn" id="mobile-search-button" onclick="show_search()">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
<style>
.mobile-search {
display: none;
}
</style>
<script type="text/javascript">
var mobile_search = document.getElementById("mobile-search");
function show_search() {
if (mobile_search.style.display === "none") {
mobile_search.style.display = "block";
} else {
mobile_search.style.display = "none";
}
}
</script>
正如你所看到的，它需要2次点击显示div，我希望它仅为1。发生了什么？
Stack Overflow用户
发布于 2020-09-26 06:53:51
样式属性不会从CSS返回样式。根据您的情况，当您单击该按钮时，它将添加display: none，单击第二次添加display: block后，这就是为什么您需要单击两次才能显示div。
你可以用两种方法试试。
步骤1:只是切换块，单击函数上没有
var toggle = document.getElementById("mobile-search-button");
var content = document.getElementById("mobile-search");
toggle.addEventListener("click", function() {
content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
});.mobile-search {
display: none;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="mobile-search" class="mobile-search">
<input type="search" name="">
</div>
<button class="search-btn" id="mobile-search-button">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
步骤2:
您不需要任何css，添加样式到您的输入框。
var mobile_search = document.getElementById("mobile-search");
function show_search() {
if (mobile_search.style.display === "none") {
mobile_search.style.display = "block";
} else {
mobile_search.style.display = "none";
}
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="mobile-search" class="mobile-search" style="display: none">
<input type="search" name="">
</div>
<button class="search-btn" id="mobile-search-button" onclick="show_search()">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
步骤:额外的
你可以用一种更简单的方法做更多的事情。只需按一下类即可
$("#mobile-search-button").on("click", function(){
$("#mobile-search").toggle();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="mobile-search" class="mobile-search" style="display: none">
<input type="search" name="">
</div>
<button class="search-btn" id="mobile-search-button">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64074709
复制相关文章
相似问题
腾讯云开发者
