ツリー表示で1つだけliノードを開いたままにする

Question

ツリービューを表示するには、1つのliをクリックすると他の兄弟liを非表示にしたい。 1つのノードだけを開き、その子要素を展開する必要があります。下記のフィドルリンクを確認してください。 HTMLコード：

第1

• 項目
  • サブ項目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 

    }); 
}