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

Question

当我单击一个 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/

Answer 1

这应该可以！ cmets中的所有信息： 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

    });
}

Answer 2

我已经修改了你的 js 代码来折叠兄弟节点。完整的工作小提琴here

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

Answer 3

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

$('#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 Demo