这是前端新手常踩的一个小坑，我来给你理清楚原因和解决办法：

问题根源 #

你通过element.style.display读取的只是元素的行内样式（也就是直接写在HTML标签style属性里的样式），而你在外部CSS文件里定义的display: none属于外部样式表规则，并不会被element.style这个对象捕获到。所以初始状态下，document.getElementById("search-bar").style.display返回的是空字符串。

这就导致了首次点击无效的情况：

• 第一次点击时，判断条件if(con.style.display == 'none')不成立（因为是空字符串），代码执行else分支，把display设为none——但元素本来就是隐藏的，所以看起来没变化。
• 第二次点击时，con.style.display已经是'none'了，条件成立，就会切换为block，之后就能正常来回切换了。

解决办法 #

这里有几种可行的方案，按推荐程度排序：

方案1：使用CSS类切换（最推荐，符合关注点分离） #

把样式控制完全交给CSS，JS只负责切换类，代码更简洁易维护：

首先修改你的CSS，默认让元素显示，用一个类来控制隐藏：

#search-bar { 
  position: absolute; 
  height: 4em; 
  width: 20em; 
  background-color: white; 
  border: 1px solid black; 
  padding: 1.5rem; 
  right: 0;
  display: block; 
}
#search-bar.hidden {
  display: none;
}

然后修改JS代码，直接切换类：

openSearch = () => { 
  var con = document.getElementById("search-bar");
  con.classList.toggle('hidden');
}

这样不管初始状态如何，每次点击都会切换元素的显示/隐藏状态，逻辑简单清晰。

方案2：用getComputedStyle获取实际生效的样式 #

如果不想修改CSS结构，可以用window.getComputedStyle获取元素当前实际应用的样式（包括外部样式表、内嵌样式等）：

openSearch = () => { 
  var con = document.getElementById("search-bar");
  const actualDisplay = window.getComputedStyle(con).display;
  if(actualDisplay === 'none') { 
    con.style.display = 'block'; 
  } else { 
    con.style.display = 'none'; 
  } 
}

这样就能准确判断元素当前的显示状态，解决首次点击无效的问题。

方案3：给元素加行内初始样式（不推荐） #

你可以直接在HTML的search-bar元素上加上行内样式style="display:none"：

<div id="search-bar" style="display:none">...</div>

这样初始时con.style.display就是'none'，你的原JS代码就能正常工作了。但这种方式把样式和HTML结构混在一起，不符合前端开发的关注点分离原则，不建议在项目中使用。

内容的提问来源于stack exchange，提问作者Hide