Question

今天我对我们进行了伪编码，然后我尝试为移动浏览器制作隐藏/显示内容功能。

问题是（不是我硬编码的东西），按钮隐藏或显示内容的延迟是我认为的，因为它之前没有初始化。

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">

关于我的硬编码，我只是做了那个＆＃34;父母，父母身份＆＃34; （Horarios）与＆＃34;隐藏 - ＆＃34;，我现在不知道更好的解决方案，但在某种程度上它还可以。

现在问题在于：

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;
}

当我测试它时，我必须单击一次，它什么都不做，然后它才能工作。我认为这是因为＆＃34;内容＆＃34;没有任何价值可供比较，所以第一次没什么可做的，然后它有一个值。

可以修复它吗？我知道它会伤害你的眼睛，但这种奇怪的感觉会以某种方式起作用。

Answer 1

最好通过隐藏和显示使用类而不是直接访问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>

如果您需要返回那么远（IE 9及更低版本），那么支持不支持 classList 对象的浏览器并不太难。

Answer 2

为什么它不起作用？

您的Javascript直接从其HTML 获取元素的样式，因此它尝试从HTML display元素中读取hide-horarios样式的内容。但是，在开始时，这还没有设置 - 您已经在CSS中定义了样式，就Javascript而言， style属性不存在 ，因此display风格也没有。

相反，它设置为null。

那么，当我们第一次点击按钮会发生什么？好吧，还没有样式元素（它在HTML标记中不存在），因此content变量设置为null（因为没有值）。因此，您的if语句正在运行一个变为if (null == "none")的条件 - 当然，我们知道它将评估为true，因此它会运行您的else部分代码，将显示样式设置为none 。现在这意味着已创建style属性，并且已设置其中的显示样式（通过Javascript）。

下次该功能运行时，style.display将不是null，而是none。因此，您的代码将按预期运行。

我们能做什么？

您的问题有一些解决方案。在这里我将讨论四个：

将style属性添加到您的<span id="hide-horarios">元素中，如下所示：

<span id="hide-horarios" style="display:none">

这是最明显的解决方案，因为现在定义了style属性，因此可以使用Javascript读取它。

阅读计算的元素样式，而不是style属性中的值。这将获取您在CSS文件中设置的样式值，这样您就不必使用内联样式。

只需更改

var content = document.getElementById(value).style.display;

到

var content = window.getComputedStyle(document.getElementById(value))["display"];

使用HTML5数据属性存储有关隐藏或显示元素的信息。这在语义上可能是最好的解决方案。首先，将data属性添加到HTML元素中：

<span id="hide-horarios" data-hidden="yes">

接下来，检查Javascript中的data-hidden属性，而不是样式属性：

var content = document.getElementById(value).getAttribute("data-hidden");

现在，你可以检查一下。如果您使用此解决方案，请确保在data-hidden声明中检查none值而不是if - 这可以是您想要的任何内容。在这个例子中，我们会这样做：

if (content == "yes") { ... }

最后，我们需要在每次更改后设置数据属性。我们可以通过分别在if和else语句中运行以下代码来实现此目的：

document.getElementById(value).setAttribute("data-hidden","no") //goes in if statement

和

document.getElementById(value).setAttribute("data-hidden","yes") //goes in else statement

或者，只需简单地翻转if语句条件：

if (content != "block") { ... }

（感谢评论中的@nnnnnn）

防止点击没有功能

2 个答案:

为什么它不起作用？

我们能做什么？