梁什么鸭, 2021-05-01 19:38 采纳率: 50%
浏览 160

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

 <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并没显示出来,需要点击第二次才显示。这是什么原因造成的??
 

  • 写回答

6条回答 默认 最新

  • 关注

        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') 即可。
     

    评论

报告相同问题?

悬赏问题

  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题:求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab,jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算
  • ¥15 java如何提取出pdf里的文字?