第一次点击无效，点击第二次才响应

 <style>
    *{
      margin: 0;
      padding: 0;
    }
    #div1 {
      display: none;
    }
    #div1 li {
      width: 100px;
      height: 40px;
      background-color: pink;
    }
  </style>
</head>
<body>
<input type="button" value="更多" onclick="showHide()">
<div id="div1">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

<script>
  function showHide() {
    var oDiv = document.getElementById('div1');
    if(oDiv.style.display === 'none'){
      oDiv.style.display = 'block';
    } else {
      oDiv.style.display = 'none';
    }
  }
</script>
</body>

第一次点击隐藏的div并没显示出来，需要点击第二次才显示。这是什么原因造成的？？

if(oDiv.style.display !== 'block'){
oDiv.style.display = 'block';
} else {
oDiv.style.display = 'none';
}

因为oDiv.style.display 获取的只是元素style属性中的内联样式，不能获取在css样式表中的样式。
第一次获取 oDiv.style.display 值是 "" 空字符串。

把判断条件改成 if(oDiv.style.display !== 'block') 即可。

if(oDiv.style.display === 'none'){

改为

if(oDiv.style.display === '' || oDiv.style.display === 'none'){

<style>
    *{
      margin: 0;
      padding: 0;
    }
    #div1 {
      display: none;
    }
    #div1 li {
      width: 100px;
      height: 40px;
      background-color: pink;
    }
  </style>
</head>
<body>
<input type="button" value="更多" onclick="showHide()">
<div id="div1">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>
 
<script>
  function showHide() {
    var oDiv = document.getElementById('div1');
    if(oDiv.style.display === '' || oDiv.style.display === 'none'){
      oDiv.style.display = 'block';
    } else {
      oDiv.style.display = 'none';
    }
  }
</script>
</body>

 <style>
    *{
      margin: 0;
      padding: 0;
    }
    #div1 {
      display: none;
    }
    #div1 li {
      width: 100px;
      height: 40px;
      background-color: pink;
    }
  </style>
</head>
<body>
<input type="button" value="更多" onclick="showHide()">
<div id="div1">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>
<script>
  function showHide() {
    var oDiv = document.getElementById('div1');
    if(oDiv.style.display !== 'block'){
      oDiv.style.display = 'block';
    } else {
      oDiv.style.display = 'none';
    }
  }
</script>

请采纳，谢谢！

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y