Javascript 在树状视图显示中仅保持一个li节点处于打开状态

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

第一部分

• 项目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/

css:
李树{
列表样式类型：无；
位置：相对位置；
}
李树{
显示：无；
}
ul.tree li.open>ul{
显示：块；
}
李树{
颜色：黑色；
文字装饰：无；
}
李：以前{
高度：1米；
填充：0.1米；
字体大小：.8em；
显示：块；
位置：绝对位置；
左：-1.3em；
顶部：2米；
}
不是（最后一个孩子）：在之前{
内容：“+”；
}
不是（：最后一个孩子）：在之前{
内容:'一';；
}
js代码：
var tree=document.queryselectoral（'ul.tree a:not（：last child）'）；
对于（var i=0；i

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

$('#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);
            }
        })
});

---

我对您的js代码进行了一些修改，以折叠兄弟节点。全工作小提琴

var-tree=document.querySelectorAll（'ul.tree a:not（：last child）'）；
对于（var i=0；i

这应该行得通！ 评论中的所有信息：

var-tree=document.querySelectorAll（'ul.tree a:not（：last child）'）；
对于（var i=0；i

这也是一个答案，朋友：-）无法选择作为答案

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');
        }
    });
}

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

    });
}