我有一个带有无限节点的树结构，如何在每个节点下放置Togglable content？
我的意思是Togglable content对于所有节点都是相同的。
我为min-width设置了min-height和.tree li a，我希望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>最佳答案
不要对多个元素使用相同的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/en-US/docs/Web/API/Document/querySelectorAll
关于javascript - 树状结构的多个JavaScript切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53570434/