Javascript JS显示Div，点击2次

我试图用JavaScript显示一个div，但正如标题所说，需要点击2次才能显示。 下面是我正在使用的代码，在同一个文件上使用

标记调用JS：

.移动搜索{
显示：无；
}
var mobile_search=document.getElementById（“移动搜索”）；
函数show_search（）{
if（mobile_search.style.display==“无”）{
mobile_search.style.display=“block”；
}否则{
mobile_search.style.display=“无”；
}
}

您需要单击按钮两次，因为当您第一次单击按钮时，会出现以下情况

mobile_search.style.display === "none"

是

false

。这是因为属性返回的对象包含使用属性添加到元素上的样式列表。换句话说，它返回元素上设置的内联CSS样式。在代码中，由于您没有使用内联CSS添加

display:none

样式，因此

mobile\u search.style.display

的初始值并不是您所期望的

因此，第一次单击时，执行

else

块，将

display

设置为

none

，第二次单击时，上述条件计算为

true

，并显示

输入

元素

解决方案 您有两个选项可以解决此问题：

• 将

  display:none

  作为内联样式添加到

  #mobile search

  元素中

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

  。移动搜索{
  显示：无；
  }

  ---

  样式属性不会从CSS返回样式。根据您在单击按钮时的情况，它将添加display:none，在第二次单击它添加display:block之后，这就是为什么您需要单击两次以显示div
  你可以用两种方法来尝试
  第1步：只需在单击功能时切换块和无

  var toggle=document.getElementById（“移动搜索按钮”）；
  var content=document.getElementById（“移动搜索”）；
  toggle.addEventListener（“单击”，函数（）{
  content.style.display=（content.dataset.toggled^=1）？“块”：“无”；
  });
  。移动搜索{
  显示：无；
  }
  当您已经有一个类要隐藏时，为什么不切换该类：
  
  
  var toggle=document.getElementById（“移动搜索按钮”）；
  var classes=document.getElementById（“移动搜索”）.classList；
  toggle.addEventListener（“单击”，函数（）{
  classes.contains（“移动搜索”）？classes.remove（“移动搜索”）：classes.add（“移动搜索”）；
  });
  。移动搜索{
  显示：无；
  }
  属性
  .style
  不会返回从CSS继承的样式。使用
  getComputedStyle（）
  。