JS显示Div需要2次点击
我正试图用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。发生了什么？
回答 3
Stack Overflow用户
发布于 2020-09-26 06:52:21
您需要单击该按钮两次，因为当您第一次单击该按钮时，以下条件
mobile_search.style.display === "none"是false。这是因为Element.style属性返回CSSStyleDeclaration对象，该对象包含使用style属性添加到元素上的样式列表。换句话说，它返回元素上设置的内联CSS样式。在您的代码中，由于您没有使用内联CSS添加display: none样式，所以mobile_search.style.display的初始值与您预期的不一样。
因此，在第一次单击时，执行else块，将display设置为none，当第二次单击时，上述条件的计算结果为true，并显示input元素。
解决方案
要解决这个问题，您有几个选择：
- 将
display: none作为内联样式添加到#mobile-search元素.
中。
- 使用
Window.getComputedStyle()方法获取display属性.
的值。
var mobile_search =document.getElementById(“移动搜索”)；函数show_search() { if === "none") { mobile_search.style.display =“块”；}show_search{ mobile_search.style.display =“无”；}}
.移动搜索{ display: none；}
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用户
发布于 2020-09-26 07:13:38
当您已经有了一个类来隐藏mobile-search时，为什么不切换一下：
var toggle = document.getElementById("mobile-search-button");
var classes = document.getElementById("mobile-search").classList;
toggle.addEventListener("click", function() {
classes.contains("mobile-search") ? classes.remove("mobile-search") : classes.add("mobile-search");
});.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>
https://stackoverflow.com/questions/64074709
复制相似问题
腾讯云开发者
