今天我对我们进行了伪编码,然后我尝试为移动浏览器制作隐藏/显示内容功能。
问题是(不是我硬编码的东西),按钮隐藏或显示内容的延迟是我认为的,因为它之前没有初始化。
HTML:
<article id="horarios">
<h2>Horarios <a onclick="showContent(parentNode.parentNode.id, this.id)" class="showContentBtn" id="showContentBtnHr"></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 = "";
}
else{
document.getElementById(value).style.display = "none";
document.getElementById(value2).innerHTML = "";
}
}
CSS
#hide-programas, #hide-horarios, #hide-aboutus{
display: none;
}
当我测试它时,我必须单击一次,它什么都不做,然后它才能工作。 我认为这是因为&#34;内容&#34;没有任何价值可供比较,所以第一次没什么可做的,然后它有一个值。
可以修复它吗?我知道它会伤害你的眼睛,但这种奇怪的感觉会以某种方式起作用。
答案 0 :(得分: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 对象的浏览器并不太难。
答案 1 :(得分:0)
您的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)