时间戳

首页 > 解决方案 > JS显示Div需要2次点击

javascript - 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 次。这是怎么回事？

标签： javascripthtmlcss

解决方案

您需要单击该按钮两次，因为当您第一次单击该按钮时，以下条件

mobile_search.style.display === "none"

是false。这是因为Element.style属性返回CSSStyleDeclaration的对象包含使用style属性添加到元素上的样式列表。换句话说，它返回在元素上设置的内联 CSS 样式。在您的代码中，由于您没有display: none使用内联 CSS 添加样式，初始值 of mobile_search.style.display不是您所期望的。

因此，在第一次单击时，else块执行，设置display为none，当您第二次单击时，上述条件评估为true并input显示元素。

解决方案

你有几个选项来解决这个问题：

  • 添加为元素display: none的内联样式。#mobile-search

    <div id="mobile-search" class="mobile-search" style="display: none;">
   <input type="search" name="" />
</div>

  • 使用Window.getComputedStyle()方法获取display属性的值。

    var mobile_search = document.getElementById("mobile-search");

function show_search() {
  if (window.getComputedStyle(mobile_search).display === "none") {
    mobile_search.style.display = "block";
  } else {
    mobile_search.style.display = "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" onclick="show_search()">
    <i class="fa fa-search" aria-hidden="true"></i>
</button>

推荐阅读