javascript - 树结构的多个javascript切换-6ren

javascript - 树结构的多个javascript切换

转载作者：太空宇宙更新时间：2023-11-04 06:42:36

25

4

我有一个无限节点的树结构，如何在每个节点下放置可切换内容？我的意思是 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>

最佳答案

不要使用相同的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 )。

关于javascript - 树结构的多个javascript切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53570434/

25

4

0

文章推荐： java -eclipse-资源泄漏 : 'appContext' is never closed

文章推荐： Java 序列化与 JSON

文章推荐： html - 如何将导航标题设置到右侧 - Wordpress

ANTLR4:树结构
我正在扩展 baseClass 监听器并尝试读取一些值，但是顺序中似乎没有任何层次结构。我的语法的精简版如下: start: config_options+ config_options: (KEY
04、XML 树结构
XML文档是一种树形结构，它从根部开始，然后扩展到枝叶一个 XML 文档范例 XML文档使用的是简单的具有自我描述性的语法我们拿之间的小红写给小明的情书作为范例 <?xml v
php - 具有多态关系的多维数组(树结构)
要了解我想做什么，这里有一个简单的解释:我想创建模板。一个"template"有一个“面板”这个“面板”有一些“项目”和另一个“面板”我们必须一步一步地做，直到最后一个“Item” 我想要这样的东西
mysql - 树结构 - 从两个表中获取最后一级数据
我的数据结构如下。 A A1 A2 B B1 C C1 C2 C3 这些信息转移到两个名为group1和group2的表中。 group1有第一层数据和中间层数据。 gro
javascript 树结构 - 遍历树结构并显示子项内计数属性的总和
所以我有一个如下所示的树结构，其中我在叶节点中有一个计数属性。我想总结计数并将计数总和与其父项进行比较。比 parent1 和 parent2 有他们的 child 的总和。然后从那里继续，所以 gr
Javascript 递归(树结构)
我有以下 json : var jsonObj = [ { "parentIndex": '0' ,
无需循环查询的类别和子类别的 PHP 树结构
我正在尝试创建一个包含任意数量子类别的类别列表，其中子类别也可以有自己的子类别。我从 Mysql 数据库中选择了所有类别，猫在标准关联数组列表中，每个类别都有一个 id、名称、parentid，如果
javascript - 动态 Javascript 树结构
我想动态构建层次结构，每个节点创建为层次结构中的一个层/级别，具有自己的节点数组。这应该形成一个树结构。应该有一个根节点，以及未定义数量的节点和级别来构成层次结构大小。除了根节点之外，什么都不应该被修
api - Wikitravel XML 树结构
我正在浏览 Wikitravel API，我注意到他们提供的 XML 文件只是将所有信息集中在一个大 blob 中。示例:http://wikitravel.org/en/Special:Export
iphone - 实现 UITableView 树结构
我正在尝试设置一个UITableView来显示嵌套的线程项目。我正在使用 Core Data 和 NSFetchedResultsController，但不确定我的方法应该是什么。我想显示这样的信息:
sqlite - 查询 SQLite 树结构
我有一个这样的表数据库: tree{id,name,parent}content{id,content,parent}tree 表包含一个树状结构，如果 parent 是 0，它是顶级元素，如果不同，
javascript - 从多级对象数组创建 JSON 树结构
我有一个像这样的 json 对象数组: [{ "vehicleid": 3, "name": "Teste2VDD", "brand": "Scania", "mode
javascript - 使用子级创建 json 树结构
我有一个 json 树结构，通过按此 fiddle 上的调用来附加该结构:http://jsfiddle.net/adrianjsfiddlenetuser/C6Ssa/4/ 按 fiddle 上的调
java - 重新加载 prefuse 树结构？
我需要使用 prefuse 可视化一个 xml 文件，但由于其大小，我必须一次仅加载文件的一部分，并将它们表示为 prefuse 中的树结构。我设法加载并可视化第一棵树，其中包含所有 xml 元素的深
python - 从标识符构建 json 树结构
我有一个包含如下数据的文件: ID attribute 1 'text' 101 'text' 1011 'text' 10111 'text' 1011101 'text' 1011102 'tex
javascript - 从对象数组递归创建 JSON 树结构
这是我的数据结构: { projects: [ { revisions: [ { files: [] }, ], } ], us
javascript - 将对象列表转换为 json 树结构
我有一个列表需要转换成json格式。这个.. var sourceList = [ { title: "item-1", indent: "0" }, { title: "item-
java - OpenCMS - 如何展开平面结构而不是文件夹/树结构
我希望我的内容有一个树/文件夹结构，但希望所有页面都作为一个平面 URL。例如位于/cat1/subcat2/tulips.html 的页面将在以下位置提供: http://example.com/
javascript - 树结构 - Javascript - parent ？
简单来说我有一个由对象组成的树结构。是否可以构建该树并向每个对象添加对其父对象的引用？我知道引用适用于对象，但我不确定在这种情况下是否有效？我希望能够写出这样的东西 currentLevel
ios - Firebase JSON 树结构
我创建了一个涉及学校学生的项目。当我开始构建这个项目时，我遇到了三个主要问题: 1)推荐或更好的 JSON 树结构？ schools grades users(uids) in

首页

博学

6Ren·AI

商城

javascript - 树结构的多个javascript切换