简体   繁体   English

以相反的顺序单击时,通过javascript添加到嵌套列表的“ onclick”属性不起作用

[英]“onclick” attribute added to nested lists through javascript doesn't work when clicked in reverse order

I'm trying to build a show/hide list from scratch. 我正在尝试从头开始构建显示/隐藏列表。 The list works when I click from top down but bombs when I click it from down up. 当我从上至下单击该列表时,该列表有效,但当我从上至下单击该列表时,则炸弹。 I'd appreciate it if someone can point out what I'm doing wrongly, thank you! 如果有人能指出我做错了什么,我将不胜感激,谢谢!

EDIT: Sorry, I just noticed that the first words are actually clickable. 编辑:对不起,我只是注意到第一个单词实际上是可点击的。 "Second" and "Third" expands the list but "Element" doesn't. “第二”和“第三”扩展列表,但“元素”不扩展。

 var clickableLists = document.querySelectorAll("p:only-of-type"); for (var i = 0; i < clickableLists.length; i += 1) { clickableLists[i].setAttribute("onclick", "showMore(this.nextElementSibling)"); } function showMore(selectedElement) { selectedElement.style.opacity = "1"; selectedElement.style.height = "auto"; } 
 ul { opacity: 0; height: 0; } li { list-style: none; } 
 <!DOCTYPE html> <html> <head> <title>List Viewer</title> </head> <body> <div> <div> <p>First Element</p> <ul> <li> <p>One</p> <ul> <li>+ Test</li> </ul> </li> <li> <p>Two</p> <ul> <li>+ Test</li> </ul> </li> </ul> </div> <div> <p>Second Element</p> <ul> <li> <p>One</p> <ul> <li>+ Test</li> </ul> </li> <li> <p>Two</p> <ul> <li>+ Test</li> </ul> </li> </ul> </div> <div> <p>Third Element</p> <ul> <li> <p>One</p> <ul> <li>+ Test</li> </ul> </li> <li> <p>Two</p> <ul> <li>+ Test</li> </ul> </li> </ul> </div> </div> </body> </html> 

Use "visibility: hidden;" 使用“可见性:隐藏;” instead of "opacity: 0;" 而不是“不透明度:0;”

 <!DOCTYPE html> <html> <head> <title>List Viewer</title> <style type="text/css"> ul { visibility: hidden; height: 0; } li { list-style: none; } </style> </head> <body> <div> <div> <p>First Element</p> <ul> <li> <p>One</p> <ul> <li>+ Test</li> </ul> </li> <li> <p>Two</p> <ul> <li>+ Test</li> </ul> </li> </ul> </div> <div> <p>Second Element</p> <ul> <li> <p>One</p> <ul> <li>+ Test</li> </ul> </li> <li> <p>Two</p> <ul> <li>+ Test</li> </ul> </li> </ul> </div> <div> <p>Third Element</p> <ul> <li> <p>One</p> <ul> <li>+ Test</li> </ul> </li> <li> <p>Two</p> <ul> <li>+ Test</li> </ul> </li> </ul> </div> </div> <script type="text/javascript"> var clickableLists = document.querySelectorAll("p:only-of-type"); for (var i = 0; i < clickableLists.length; i += 1){ clickableLists[i].setAttribute("onclick", "showMore(this.nextElementSibling)"); } function showMore(selectedElement) { selectedElement.style.visibility = "visible"; selectedElement.style.height = "auto"; } </script> </body> </html> 

Your invisible elements are overflowing their container with height: 0 and sitting on top of the following elements, intercepting their clicks. 您的不可见元素溢出了其容器, height: 0并且位于以下元素的顶部,从而拦截了它们的点击。 It's easier to see the problem without the opacity change: 不更改不透明度,更容易发现问题:

 var clickableLists = document.querySelectorAll("p:only-of-type"); for (var i = 0; i < clickableLists.length; i += 1){ clickableLists[i].setAttribute("onclick", "showMore(this.nextElementSibling)"); } function showMore(selectedElement) { selectedElement.style.opacity = "1"; selectedElement.style.height = "auto"; } 
 ul { height: 0; } li { list-style: none; } 
 <div> <div> <p>First Element</p> <ul> <li> <p>One</p> <ul> <li>+ Test</li> </ul> </li> <li> <p>Two</p> <ul> <li>+ Test</li> </ul> </li> </ul> </div> <div> <p>Second Element</p> <ul> <li> <p>One</p> <ul> <li>+ Test</li> </ul> </li> <li> <p>Two</p> <ul> <li>+ Test</li> </ul> </li> </ul> </div> <div> <p>Third Element</p> <ul> <li> <p>One</p> <ul> <li>+ Test</li> </ul> </li> <li> <p>Two</p> <ul> <li>+ Test</li> </ul> </li> </ul> </div> </div> 

You could add overflow: hidden instead to ensure nothing overflows the <ul> s with height: 0 , but it's even easier to just set display: none , which will remove an element from the flow entirely. 您可以添加overflow: hidden以确保没有溢出height: 0<ul> ,但是设置display: none甚至更容易,这将从流中完全删除一个元素。

It's also best practice not to represent JavaScript as a string inside JavaScript. 最好不要将JavaScript表示为JavaScript内部的字符串。 You can assign a function directly to an element's onclick property: 您可以将函数直接分配给元素的onclick属性:

clickableLists[i].onclick = function () {
  showMore(this.nextElementSibling);
};

 var clickableLists = document.querySelectorAll("p:only-of-type"); for (var i = 0; i < clickableLists.length; i += 1){ clickableLists[i].onclick = function () { showMore(this.nextElementSibling); }; } function showMore(selectedElement) { selectedElement.style.display = 'block'; } 
 ul { display: none; } li { list-style: none; } 
 <div> <div> <p>First Element</p> <ul> <li> <p>One</p> <ul> <li>+ Test</li> </ul> </li> <li> <p>Two</p> <ul> <li>+ Test</li> </ul> </li> </ul> </div> <div> <p>Second Element</p> <ul> <li> <p>One</p> <ul> <li>+ Test</li> </ul> </li> <li> <p>Two</p> <ul> <li>+ Test</li> </ul> </li> </ul> </div> <div> <p>Third Element</p> <ul> <li> <p>One</p> <ul> <li>+ Test</li> </ul> </li> <li> <p>Two</p> <ul> <li>+ Test</li> </ul> </li> </ul> </div> </div> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM