Question

我正在开发一个文件树。使用我现在的代码，我只能显示和隐藏树上的所有目录，无论我点击哪个节点都无关紧要。

我需要能够维护相同的类名，但只显示/隐藏我点击的元素。

请检查代码段。

function init_php_file_tree() {
  $(this).on('click', function() {
    $(this).toggleClass('closed');
    $('.pft-directory ul').toggle();
  });
};
jQuery(init_php_file_tree);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html> 

  <head>
    <meta charset="utf-8">
    <title></title>
  </head> 

  <body>
    <ul>
      <li class="pft-directory">
        <a class="closed" href="#">Parent directory </a>
        <ul style="display: none;">
          <li class="pft-file ext-pdf">File Name </li>
          <li class="pft-file ext-doc">Another File Name </li>
        </ul>
      
        <ul style="display: none;">
          <li class="pft-directory">Directory Name </li>
          <li class="pft-directory">Another Directory Name </li>
        </ul>
      </li>

        <!-- If you have more than 2 directories in the same level they all expand and collapse, no matter wich one you click --> 
        
      <li class="pft-directory">
        <a class="closed" href="#">Parent directory </a>
        <ul style="display: none;">
          <li class="pft-file ext-pdf">File Name </li>
          <li class="pft-file ext-doc">Another File Name </li>
        </ul>

        <ul style="display: none;">
          <li class="pft-directory">Directory Name </li>
          <li class="pft-directory">Another Directory Name </li>
        </ul>
      </li> 

    </ul>
  </body> 

</html>

Answer 1

您需要选择正确的元素.pft-directory并使用函数children来显示/隐藏ul元素。

    +-- Correct selector
    |
    v
$('.pft-directory').on('click', function() {
    $(this).toggleClass('closed');    
    $(this).children('ul').toggle();
            ^
            |
            +---- Get the 'ul' elements
});

＆＃13;

function init_php_file_tree() {
  $('.pft-directory').on('click', function() {
    $(this).toggleClass('closed');    
    $(this).children('ul').toggle();
  });
};
jQuery(init_php_file_tree);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html> 

  <head>
    <meta charset="utf-8">
    <title></title>
  </head> 

  <body>
    <ul>
      <li class="pft-directory">
        <a class="closed" href="#">Parent directory </a>
        <ul style="display: none;">
          <li class="pft-file ext-pdf">File Name </li>
          <li class="pft-file ext-doc">Another File Name </li>
        </ul>
      
        <ul style="display: none;">
          <li class="pft-directory">Directory Name </li>
          <li class="pft-directory">Another Directory Name </li>
        </ul>
      </li>

        <!-- If you have more than 2 directories in the same level they all expand and collapse, no matter wich one you click --> 
        
      <li class="pft-directory">
        <a class="closed" href="#">Parent directory </a>
        <ul style="display: none;">
          <li class="pft-file ext-pdf">File Name </li>
          <li class="pft-file ext-doc">Another File Name </li>
        </ul>

        <ul style="display: none;">
          <li class="pft-directory">Directory Name </li>
          <li class="pft-directory">Another Directory Name </li>
        </ul>
      </li> 

    </ul>
  </body> 

</html>

＆＃13;

Answer 2

您可以将代码更改为

$('.pft-directory ul').toggle();  => $(this).find("ul").toggle();

Answer 3

您可以稍微更改一下代码以定位下面的特定元素吗？

function init_php_file_tree() {

$('.pft-directory')  
  .on('click', function() {
     $(this).children('ul').toggle();
  })
  .children("ul").hide();
};
jQuery(init_php_file_tree);

仅切换具有相同类名的一个节点

3 个答案: