防止没有功能的点击

Lautaro脖子

今天，我对一个we进行了伪编码，然后尝试为移动浏览器创建隐藏/显示内容功能。

问题是（不是我的硬编码问题），这是按钮隐藏或显示内容的延迟，我认为这是因为之前未进行初始化。

HTML：

<article id="horarios">
 <h2>Horarios <a onclick="showContent(parentNode.parentNode.id, this.id)" class="showContentBtn" id="showContentBtnHr">&#xe808;</a></h2>
  <span id="hide-horarios">

关于我的硬编码问题，我只是将“ parent，parent id”（Horarios）与“ hide-”结合使用，现在我不知道更好的解决方案，但是从某种程度上来说还可以。

现在这是问题所在：

JS：

    function showContent(value, value2){
      var value="hide-"+value;
      var content = document.getElementById(value).style.display;
      if(content == "none"){
        document.getElementById(value).style.display = "block";
        document.getElementById(value2).innerHTML = "&#xe809;";
      }
      else{
        document.getElementById(value).style.display = "none";
        document.getElementById(value2).innerHTML = "&#xe808;";
      }
    }

的CSS

#hide-programas, #hide-horarios, #hide-aboutus{
  display: none;
}

当我测试它时，我必须单击一次，它什么也不做，然后它起作用了。我认为这是因为“内容”没有任何可比较的价值，因此第一次无需执行任何操作，然后便有了价值。

有可能解决吗？我知道它会伤害您的眼睛，但是这种怪异的效果在某种程度上可以发挥作用。

罗布

最好通过隐藏和显示类来解决此问题，而不是直接访问DOM属性。下面只是一个简单的例子，例如

function toggleClass(id, className) {
  var el = document.getElementById(id);
  if (el && el.classList && el.classList.toggle) {
    el.classList.toggle(className);
  }
}

<head><style type="text/css">
  .hidden {
    display: none;
  }
</style></head>

<body>
  <div class="hidden" id="d0">I'm a div</div>
  <button onclick="toggleClass('d0','hidden')">Toggle div</button>
</body>

如果您需要返回到不支持classList对象的浏览器，则可以很容易地做到这一点（IE 9及更低版本）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。