HTML TreeView 展开行答案

【问题标题】：HTML TreeView Expand rowsHTML TreeView 展开行
【发布时间】：2018-12-31 09:10:48
【问题描述】：

我正在使用敲除和 dxTreeView，我有树视图和 HTML 表，我希望在单击表中的一行时展开树视图并基于表和树视图中的相同 id 聚焦。如果那不可能，我想通过 html 制作树视图并在没有 devextreme 的情况下淘汰

 here is my code

https://codepen.io/anon/pen/qLVPbb

【问题讨论】：

标签： html knockout.js tree treeview devextreme

【解决方案1】：

我不确定您为什么要使用表格来列出俱乐部。您可以简单地拥有俱乐部的无序列表和所有详细信息的嵌套列表。

<ul id="myTreeView">
    <li>
        <span>Clubs</span>
            <ul>
                <li>
                    <span class="expandable">CO Harrach</span>
                        <ul class="non-expandable">
                            <li>Address: Asia</li>
                            <li>Open: 24x7</li>
                        </ul>
                </li>
            </ul>
            <ul>
                <li>
                    <span class="expandable">Zamalek</span>
                        <ul class="non-expandable">
                            <li>Address: Australia</li>
                            <li>Open: 5 days</li>
                        </ul>
                </li>
            </ul>
  </li>
</ul>


<style>
 #myTreeView {
  list-style-type: none;
}
#myTreeView ul {
list-style-type:none;
}
#myTreeView {
  margin: 0;
  padding: 0;
}
.expandable {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}
.expandable::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
.expanded::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */'
  transform: rotate(90deg);  
}
.non-expandable {
  display: none;
}
.active {
  display: block;
}
</style>


<script>
var toggler = document.getElementsByClassName("expandable");
var i;
for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".non-expandable").classList.toggle("active");
    this.classList.toggle("expanded");
  });
}
</script>

我刚刚创建了一个示例树视图here。

另外，你可以阅读我的全文here。

【讨论】：