开发文件树时如何仅切换单个同class类名节点的显示与隐藏

嘿，我帮你搞定这个文件树的小bug啦！你现在遇到的问题是，点击任意节点都会展开/收起所有目录，这是因为代码里用了全局选择器，选中了页面上所有符合条件的列表元素。要实现只切换点击元素对应的子目录，只需要把选择范围限定在当前点击的节点内部就行，而且完全不需要改动class类名。

修改后的代码 #

function init_php_file_tree() {
  $(this).on('click', function() {
    $(this).toggleClass('closed');
    // 仅在当前点击元素的后代中查找目标ul，而非全局所有
    $(this).find('.pft-directory ul').toggle();
  });
};
jQuery(init_php_file_tree);

改动说明 #

原来的代码里，$('.pft-directory ul')会选中页面上所有带有.pft-directory类元素下的ul，所以点击任何节点都会触发所有目录的切换。改成$(this).find('.pft-directory ul')后，find()方法只会在当前点击的节点（也就是$(this)指向的元素）的后代里查找匹配的ul，这样就只会影响你点击的那个目录对应的子列表了。

如果你的DOM结构中，目标ul是当前点击元素的直接子元素，也可以用$(this).children('.pft-directory ul')，这种方式的查找效率会更高一些，不过find()的适配性更强，能应对更深层次的嵌套结构。

内容的提问来源于stack exchange，提问作者NullEins