多个JavaScript切换树状结构
[英]Multiple javascript toggle for tree structure
问题描述
我有一个带有无限节点的树形结构，如何在每个节点下放置可Togglable content ？ 我的意思是所有节点的可Togglable content都是相同的。 我为.tree li a设置了min-width和min-height ，并且希望Togglable content位于.tree li a 。
现在切换1个节点的工作，并且不在每个节点下。
照片：
var toggle = document.getElementById("toggle"); var content = document.getElementById("content"); toggle.addEventListener("click", function () { content.classList.toggle("appear"); }, false);
body { font-family: sans-serif; font-size: 15px; } .tree { transform: rotate(0deg); transform-origin: 50%; } .tree ul { position: relative; padding: 1em 0; white-space: nowrap; margin: 0 auto; text-align: center; } .tree ul::after { content: ''; display: table; clear: both; } .tree li { display: inline-block; vertical-align: top; text-align: center; list-style-type: none; position: relative; padding: 1em 0.5em 0 0.5em; } .tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #ccc; width: 50%; height: 1em; } .tree li::after { right: auto; left: 50%; border-left: 1px solid #ccc; } .tree li:only-child::after, .tree li:only-child::before { display: none; } .tree li:only-child { padding-top: 0; } .tree li:first-child::before, .tree li:last-child::after { border: 0 none; } .tree li:last-child::before { border-right: 1px solid #ccc; border-radius: 0 5px 0 0; } .tree li:first-child::after { border-radius: 5px 0 0 0; } .tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #ccc; width: 0; height: 1em; } .tree li a { min-width: 16em; min-height: 5em; border: 1px solid #ccc; padding: 0.5em 0.75em; text-decoration: none; display: inline-block; border-radius: 5px; color: #333; position: relative; top: 1px; transform: rotate(0deg); } .tree li a:hover, .tree li a:hover+ul li a { background: #e9453f; color: #fff; border: 1px solid #e9453f; } .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before { border-color: #e9453f; } #content { /* DON'T USE DISPLAY NONE/BLOCK! Instead: */ background: #cf5; padding: 10px; position: inherit; visibility: hidden; opacity: 0.4; transition: 0.6s; -webkit-transition: 0.6s; transform: translateY(-20%); -webkit-transform: translateY(-20%); } #content.appear { visibility: visible; opacity: 1; transform: translateX(0); -webkit-transform: translateX(0); }
<body> <div class="row"> <div class="col-sm-12 text-center tree"> <ul> <li id="toggle"> <a href="#">parent</a> <ul> <li id="toggle"> <a href="#">boy</a> </li> <li id="toggle"> <a href="#">girl</a> </li> </ul> </li> </ul> <div id="content">This Togglable content is same for all id="toggle"</div> </div> </div> </body>
3 个解决方案
解决方案1
1 2018-12-01 11:53:12
请勿对多个元素使用相同的id ， id应该始终是唯一的。
使用class代替。
<li class="toggle"> ... </li>
然后，您可以在JavaScript中创建对象数组以访问以下元素：
let toggle_list = document.querySelectorAll(".toggle");
然后，您可以使用for循环（或者，如果想要的话，可以使用forEach方法）为每个事件分配一个事件监听器：
for(let i = 0; i < toggle_list.length; i++) {
toggle_list[i].addEventListener("click", toggleClick);
}
现在，您可以定义您的toggleClick函数，如下所示：
function toggleClick(e) {
e.target.children[0].classList.toggle("appear");
}
在此示例中， children[0]将定位被单击的<li>中的第一个元素，并且该子元素不需要单独的class="content"属性。 如果不是您想要的，则可以将其更改为其他内容（也许是children[1] ：D）。
更多信息： https : //developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll
解决方案2
0 2018-12-01 11:46:11
解决方案3
0 已采纳 2018-12-02 11:08:09
✔️用这种方式解决了：
function toggleDocs(event) { var next = event.target.nextElementSibling; if (next.style.display == "none") { next.style.display = "block"; } else { next.style.display = "none"; } } document.addEventListener('click', toggleDocs, true);
body { font-family: sans-serif; font-size: 15px; } .tree { transform: rotate(0deg); transform-origin: 50%; } .tree ul { position: relative; padding: 1em 0; white-space: nowrap; margin: 0 auto; text-align: center; } .tree ul::after { content: ''; display: table; clear: both; } .tree li { display: inline-block; vertical-align: top; text-align: center; list-style-type: none; position: relative; padding: 1em 0.5em 0 0.5em; } .tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #ccc; width: 50%; height: 1em; } .tree li::after { right: auto; left: 50%; border-left: 1px solid #ccc; } .tree li:only-child::after, .tree li:only-child::before { display: none; } .tree li:only-child { padding-top: 0; } .tree li:first-child::before, .tree li:last-child::after { border: 0 none; } .tree li:last-child::before { border-right: 1px solid #ccc; border-radius: 0 5px 0 0; } .tree li:first-child::after { border-radius: 5px 0 0 0; } .tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #ccc; width: 0; height: 1em; } .tree li a { min-width: 16em; min-height: 5em; border: 1px solid #ccc; padding: 0.5em 0.75em; text-decoration: none; display: inline-block; border-radius: 5px; color: #333; position: relative; top: 1px; transform: rotate(0deg); } .tree li a:hover, .tree li a:hover+ul li a { background: #e9453f; color: #fff; border: 1px solid #e9453f; } .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before { border-color: #e9453f; } #content { /* DON'T USE DISPLAY NONE/BLOCK! Instead: */ background: #cf5; padding: 10px; position: inherit; visibility: hidden; opacity: 0.4; transition: 0.6s; -webkit-transition: 0.6s; transform: translateY(-20%); -webkit-transform: translateY(-20%); } #content.appear { visibility: visible; opacity: 1; transform: translateX(0); -webkit-transform: translateX(0); }
<body> <div class="row"> <div class="col-sm-12 text-center tree"> <ul> <li class="clickable-heading"> <a href="#">parent</a> <div style="display:none">This is Togglable 1</div> <ul> <li class="clickable-heading"> <a href="#">boy</a> <div style="display:none">This is Togglable 2</div> </li> <li class="clickable-heading"> <a href="#">girl</a> <div style="display:none">This is Togglable 3</div> </li> </ul> </li> </ul> </div> </div> </body>
列表树结构切换不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.