javascript - 用户需要点击两次才能删除带有 javascript 切换可见性的 div block

Question

我正在使用以下代码，它在某种程度上可以工作，但在生产中它需要用户单击链接两次。很奇怪。

我的代码是不是已经过时了？如果您能随时提供帮助，我们将不胜感激。

js:

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

html:

                    <div id="top_min_order_alert">
                        <p>Minimum Order: $5 for carry out orders, $10 for delivery (before tax and delivery fee)</p>
                        <p>Online ordering stops 15 minutes before closing time</p>
                        <p><a href="#" onclick="toggle_visibility('top_min_order_alert');">Ok, Got it.</a></p>
                    </div>

Answer 1

用户第一次单击链接时，e.style.display 等于空字符串，因此 if 采用 else > 分支并且 e.style.display 设置为 block，因此 div 保持可见。然后，当用户第二次单击时，e.style.display 等于 block 并正确设置为 none。要修复此问题，请检查 e.style.display 是否等于空字符串:

if (e.style.display === '' || e.style.display == 'block')

这里是完整的例子:

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if (e.style.display === '' || e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}

<div id="top_min_order_alert">
  <p>Minimum Order: $5 for carry out orders, $10 for delivery (before tax and delivery fee)</p>
  <p>Online ordering stops 15 minutes before closing time</p>
  <p><a href="#" onclick="toggle_visibility('top_min_order_alert');">Ok, Got it.</a>
  </p>
</div>