如何使切换大小与子项大小相同？
这是一个家谱，我为 .tree li a 添加了 min-width 和 min-height 因为名字。
如何使Togglable 1 parent 位置与 child 或 tag 相同？
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: 5px solid blue;
width: 50%;
height: 1em;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 5px solid red;
}
.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: 5px solid green;
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: 5px solid cyan;
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;
}
.toggle-fffff {
/* DON'T USE DISPLAY NONE/BLOCK! Instead: */
background: #cf5;
padding: 10px;
position: inherit;
opacity: 0.4;
transition: 0.6s;
-webkit-transition: 0.6s;
transform: translateY(-20%);
-webkit-transform: translateY(-20%);
}
.toggle-c {
background: #cf5;
position: inherit;
opacity: 1;
transform: translateX(0);
-webkit-transform: translateX(0);
}
.clickable-heading {
cursor: pointer;
}<body>
<div class="row">
<div class="col-sm-12 text-center tree">
<ul>
<li class="clickable-heading">
<a class="sss" href="#">parent</a>
<div class="toggle-c" style="display:none">Togglable 1</div>
<ul>
<li class="clickable-heading">
<a href="#">boy</a>
<div class="toggle-c" style="display:none">Togglable 2</div>
</li>
<li class="clickable-heading">
<a href="#">girl</a>
<div class="toggle-c" style="display:none">Togglable 3</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<body>最佳答案
您可以添加一个 div 作为父级的容器，并将其应用为 display: table 样式，以便它仅获得其子级的宽度和高度:
.parent {
display: table;
margin: 0 auto;
}
<div class="parent">
<a class="sss" href="#">parent</a>
<div class="toggle-c" style="display:none">Togglable 1</div>
</div>
在 stackbliz 上 - https://stackblitz.com/edit/js-49efam?file=index.html
希望这对您有所帮助!
关于javascript - 切换时的树结构父位置 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53580329/