我正在开发一个文件树。使用我现在拥有的代码，我只能显示和隐藏树上的所有目录，单击哪个节点并不重要。
我需要能够维护相同的类名，但只显示/隐藏我单击的元素。
请检查代码片段。
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 which 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>最佳答案
您需要选择正确的元素.pft-directory并使用函数children来显示/隐藏ul元素。
+-- Correct selector
|
v
$('.pft-directory').on('click', function() {
$(this).toggleClass('closed');
$(this).children('ul').toggle();
^
|
+---- Get the 'ul' elements
});
function init_php_file_tree() {
$('.pft-directory').on('click', function() {
$(this).toggleClass('closed');
$(this).children('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>关于javascript - 仅切换一个具有相同类名的节点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49394739/