我已将事件监听器添加到 $(document).ready
上的一些 div
。但是,第一次需要单击两次才能触发事件(或至少获得结果。)
我正在添加一个单击处理程序,并将子节点显示或隐藏为 Accordion 。有什么想法吗?
$(document).ready(function(){
headers=document.getElementsByClassName("headerH");
for(var i=0;i<headers.length;i++){
var headline=headers[i].firstChild.innerText;
headers[i].firstChild.innerText="+"+headline;
headers[i].addEventListener('click', accord, false);
}
});
function accord(){
listofnodes=this.children;
for (var i=1; i<listofnodes.length; i++){
var headline=listofnodes[0].innerText;
if (listofnodes[i].style.display=="none"){
listofnodes[i].style.display="block";
listofnodes[0].innerText="-"+headline.substring(1);
}
else {
listofnodes[i].style.display="none";
listofnodes[0].innerText="+"+headline.substring(1);
}
}
}
最佳答案
您的问题是 javascript 属性 style.display
第一次等于空字符串。初始显示属性不是从 CSS 表填充的。
如果你翻转你的 if/else
语句,你应该在第一次点击时让它工作:
if (listofnodes[i].style.display=="block"){
listofnodes[i].style.display="none";
listofnodes[0].innerText="+"+headline.substring(1);
}
else {
listofnodes[i].style.display="block";
listofnodes[0].innerText="-"+headline.substring(1);
}
编辑:对于那些希望以最正确的方式完成此操作的人:
您可以使用Window.getCompulatedStyle
从样式表中提取默认值。这需要更多的代码,但适用于更多情况。
var element = listofnodes[i];
var display = element.style.display || getComputedStyle(element).getPropertyValue("display");
if (display=="none"){
element.style.display="block";
listofnodes[0].innerText="-"+headline.substring(1);
}
else {
element.style.display="none";
listofnodes[0].innerText="+"+headline.substring(1);
}
关于javascript - 添加了事件监听器,但需要点击 2 次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34034257/