[英]“onclick” attribute added to nested lists through javascript doesn't work when clicked in reverse order
我正在嘗試從頭開始構建顯示/隱藏列表。 當我從上至下單擊該列表時,該列表有效,但當我從上至下單擊該列表時,則炸彈。 如果有人能指出我做錯了什么,我將不勝感激,謝謝!
編輯:對不起,我只是注意到第一個單詞實際上是可點擊的。 “第二”和“第三”擴展列表,但“元素”不擴展。
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>
使用“可見性:隱藏;” 而不是“不透明度: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>
您的不可見元素溢出了其容器, height: 0
並且位於以下元素的頂部,從而攔截了它們的點擊。 不更改不透明度,更容易發現問題:
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>
您可以添加overflow: hidden
以確保沒有溢出height: 0
的<ul>
,但是設置display: none
甚至更容易,這將從流中完全刪除一個元素。
最好不要將JavaScript表示為JavaScript內部的字符串。 您可以將函數直接分配給元素的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.