在树状视图显示中只打开一个li节点

keep only one li node open in tree view display

本文关键字：一个节点 li 视图显示更新时间：2023-09-26

当我单击一个li以显示树视图时，我想隐藏其他兄弟li。只有一个节点应该打开，并且它的子元素必须展开。检查下面的小提琴链接。Html代码：

第1部分

项目A
- 分项1
- 分项2
- 分项3
项目B
- 分项1
- 分项2
- 分项3
项目C
- 分项1
- 分项2
- 分项3
项目D
- 分项1
- 分项2
- 分项3
项目E
- 分项1
- 分项2
- 分项3

  <li><a href="#">Part 2</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Part 3</a>
    <ul>
      <li><a href="#">Item A</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item B</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item C</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item D</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item E</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
css :
ul.tree li {
    list-style-type: none;
    position: relative;
}
ul.tree li ul {
    display: none;
}
ul.tree li.open > ul {
    display: block;
}
ul.tree li a {
    color: black;
    text-decoration: none;
}
ul.tree li a:before {
    height: 1em;
    padding:0 .1em;
    font-size: .8em;
    display: block;
    position: absolute;
    left: -1.3em;
    top: .2em;
}
ul.tree li > a:not(:last-child):before {
    content: '+';
}
ul.tree li.open > a:not(:last-child):before {
    content: '-';
}
js code :
var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
    tree[i].addEventListener('click', function(e) {
        var parent = e.target.parentElement;
        var classList = parent.classList;
        if(classList.contains("open")) {
            classList.remove('open');
            var opensubs = parent.querySelectorAll(':scope .open');
            for(var i = 0; i < opensubs.length; i++){
                opensubs[i].classList.remove('open');
            }
        } else {
            classList.add('open'); // Here only i want that condition to check li is already opened or not//
        }
    });
}
For more info : https://jsfiddle.net/te366hu2/2/

这应该有效！评论中的所有信息：https://jsfiddle.net/xog7hxLs/

var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
    tree[i].addEventListener('click', function(e) {
        var element = e.target.parentElement; //actually this is just the elem itself
        var parent = element.parentElement //real parent
        var opensubs = parent.querySelectorAll(':scope .open'); //check which are opened on parent
        if(opensubs.length !=0) {
                  for(var i = 0; i < opensubs.length; i++){
                opensubs[i].classList.remove('open'); //closing opened previously
            }
        } 
            element.classList.add('open'); //opening current
    });
}

我对js代码进行了一些修改，以折叠同级节点。完整工作小提琴此处

var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
    tree[i].addEventListener('click', function(e) {
        var parent = e.target.parentElement;
        var classList = parent.classList;
        var closeAllOpenSiblings = function(){        
            var opensubs = parent.parentElement.querySelectorAll(':scope .open');
            for(var i = 0; i < opensubs.length; i++){
                opensubs[i].classList.remove('open');
            }
        }
        if(classList.contains("open")) {
            classList.remove('open');
        } else {
            closeAllOpenSiblings();
            classList.add('open');
        }
    });
}

使用节点打开事件查看树并关闭其他节点。

$('#tree').on('open_node.jstree', function (e, data) {
    var nodesToKeepOpen = [];
        // get all parent nodes to keep open
        $('#'+data.node.id).parents('.jstree-node').each(function() {
           nodesToKeepOpen.push(this.id);
        });
        // add current node to keep open
        nodesToKeepOpen.push( data.node.id );
        // close all other nodes
        $('.jstree-node').each( function() {
            if( nodesToKeepOpen.indexOf(this.id) === -1 ) {
                $("#tree").jstree().close_node(this.id);
            }
        })
});

JSFiddle演示