Javascript 切换时树结构父位置css

如何使切换大小与儿童相同

这是一个家谱，由于名字的长度，我为.tree li a添加了最小宽度和最小高度

如何使父对象的可切换1位置与子对象或标记相同

功能切换DocSevent{ var next=event.target.nextElementSibling； 如果next.style.display==无{ next.style.display=块； }否则{ next.style.display=无； } } document.addEventListener'click'，toggleDocs，true； 身体{ 字体系列：无衬线； 字体大小：15px； } .树{ 变换：旋转0度； 变换原点：50%； } 树胶{ 位置：相对位置； 填充：1em 0； 空白：nowrap； 保证金：0自动； 文本对齐：居中； } .树ul：：之后{ 内容：； 显示：表格； 明确：两者皆有； } 李先生{ 显示：内联块； 垂直对齐：顶部； 文本对齐：居中； 列表样式类型：无； 位置：相对位置； 填充：1em 0.5em 0.5em； } 李树：以前， 李树：之后{ 内容：； 位置：绝对位置； 排名：0； 右：50%； 边框顶部：5px纯蓝色； 宽度：50%； 高度：1米； } 李树：之后{ 右：自动； 左：50%； 左边框：5px纯红； } 李树：独生子：：之后， 李树：独生子：：以前{ 显示：无； } 李树：独生子女{ 填充顶部：0； } 李树：第一个孩子：：之前， 李树：最后一个孩子：：之后{ 边界：0无； } 李树：最后一个孩子：：之前{ 右边框：5px纯绿色； 边界半径：0 5px 0 0； } 李树：第一个孩子：：之后{ 边界半径：5px0； } .树ul：：以前{ 内容：； 位置：绝对位置； 排名：0； 左：50%； 左边框：5px纯青色； 宽度：0； 高度：1米； } 李树先生{ 最小宽度：16em； 最小高度：5em； 边框：1px实心ccc； 填充：0.5em 0.75em； 文字装饰：无； 显示：内联块； 边界半径：5px； 颜色：333； 位置：相对位置； 顶部：1px； 变换：旋转0度； } 李树答：悬停， .树李a：悬停+ul李a{ 背景：e9453f； 颜色：fff； 边框：1px实心e9453f； } .树李a:悬停+ul李：：之后， .树李a:悬停+ul李：：之前， .树李a:悬停+ul：：之前， .树李a:悬停+ul:：之前{ 边框颜色：e9453f； } .toggle-fffff{ /*不要使用“显示无/阻止”！而是：*/ 背景：cf5； 填充：10px； 职位：继承； 不透明度：0.4； 过渡：0.6s； -webkit转换：0.6s； 转化：translateY-20%； -webkit转换：translateY-20%； } .开关-c{ 背景：cf5； 职位：继承； 不透明度：1； transform:translateX0； -webkit转换：translateX0； } .可点击标题{ 光标：指针； } 可切换1 可切换2 可切换3

---

您可以添加一个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上-

希望这有帮助