只保留一個li節點在樹視圖中顯示

Question

我想隱藏其他同胞li當我單擊一個li來diplay樹視圖。 只有一個節點應該打開並且其子元素必須展開。檢查下面的小提琴鏈接。 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

我已經修改了你的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 2

使用節點打開事件通過樹並關閉其他節點看。

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

Answer 3

這應該工作！ 在評論全部信息： 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 

    }); 
}