“onclick” attribute added to nested lists through javascript doesn't work when clicked in reverse order
Question
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>
2 answers
solution1
0 2017-04-25 01:47:06
Use "visibility: hidden;" instead of "opacity: 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>
solution2
0 ACCPTED 2017-04-25 01:47:13
Your invisible elements are overflowing their container with height: 0 and sitting on top of the following elements, intercepting their clicks. 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.
It's also best practice not to represent JavaScript as a string inside JavaScript. You can assign a function directly to an element's onclick property:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.