我问了两个与我当前问题有关的问题，但我问的方式和我提供的代码还不足以解决它，所以我提出了问题（这是从之前的解决方案尝试中提出的）以更完整的方式对此代码段进行处理。
基本上我希望这个PHP生成的文件树以它应该的方式展开/折叠。使用JQuery代码，SO的一些好人提供了我，它几乎已经解决了。
现在的问题是当你展开一个孩子时父母崩溃了，你会看到这个运行下面的代码。
备注：
- 我正在使用Wordpress，出于某种原因，您需要确保树首先折叠，否则它会完全展开。
- 我有一个相关的问题：当你点击切换时，滚动就会一直向上。
function init_php_file_tree() {
$('.pft-directory')
.on('click', function() {
$(this).children('ul').toggle();
})
.children("ul").hide();
};
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 class="file">
<ul>
<li class="pft-directory"><a href="#">Parent Directory</a>
<ul>
<li class="pft-directory"><a href="#">Child directory</a>
<ul>
<li class="pft-file ext-pdf">somefile.pdf
<ul></ul> <!-- this HTML code is generated from a php recursive function you will see it a lot (I'll fix that later) -->
</li>
<li class="pft-file ext-doc">somefile2.doc
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
</ul>
</li>
<li class="pft-directory"><a href="#">Another parent directory</a>
<ul>
<li class="pft-directory"><a href="#">Child directory</a>
<ul>
<li class="pft-file ext-docx">V1.docx
<ul></ul>
</li>
</ul>
<ul>
<li class="pft-directory"><a href="#">Child directory 2</a>
<ul>
<li class="pft-file ext-pdf">V2.pdf
<ul></ul>
</li>
<li class="pft-file ext-png">HH-V1.png
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
<li class="pft-directory"><a href="#">Child directory</a>
<ul></ul>
</li>
</ul>
</li>
<li class="pft-directory"><a href="#">Child directory 2</a>
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul>
<li class="pft-directory"><a href="#">Child directory 3</a>
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
<li class="pft-directory"><a href="#">Child directory 4</a>
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</body>
</html>
答案 0 :(得分：2)
您可以使用event.stopPropagation()（https://api.jquery.com/event.stoppropagation/）停止冒泡。
关于您的第二个问题，页面向上滚动，很可能是由于您的a href="#"。将其替换为网址或使用a href="javascript:;"。
以下示例：
function init_php_file_tree() {
$('.pft-directory')
.on('click', function(e) {
e.stopPropagation();
$(this).children('ul').toggle();
})
.children("ul").hide();
};
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 class="file">
<ul>
<li class="pft-directory"><a href="#">Parent Directory</a>
<ul>
<li class="pft-directory"><a href="#">Child directory</a>
<ul>
<li class="pft-file ext-pdf">somefile.pdf
<ul></ul> <!-- this HTML code is generated from a php recursive function you will see it a lot (I'll fix that later) -->
</li>
<li class="pft-file ext-doc">somefile2.doc
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
</ul>
</li>
<li class="pft-directory"><a href="#">Another parent directory</a>
<ul>
<li class="pft-directory"><a href="#">Child directory</a>
<ul>
<li class="pft-file ext-docx">V1.docx
<ul></ul>
</li>
</ul>
<ul>
<li class="pft-directory"><a href="#">Child directory 2</a>
<ul>
<li class="pft-file ext-pdf">V2.pdf
<ul></ul>
</li>
<li class="pft-file ext-png">HH-V1.png
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
<li class="pft-directory"><a href="#">Child directory</a>
<ul></ul>
</li>
</ul>
</li>
<li class="pft-directory"><a href="#">Child directory 2</a>
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul>
<li class="pft-directory"><a href="#">Child directory 3</a>
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
<li class="pft-directory"><a href="#">Child directory 4</a>
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</body>
</html>
答案 1 :(得分：0)
原因是当您点击子节点时，它的点击事件会传递给它的父节点，因此您必须停止该传递。为此，你必须使用stopPropagation()，它不会将事件传递给它的父元素。有关stopPropagation()的更多信息，请参阅this
function init_php_file_tree() {
$('.pft-directory')
.on('click', function(e) {
$(this).children('ul').toggle();
e.stopPropagation();
})
.children("ul").hide();;
};
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 class="file">
<ul>
<li class="pft-directory"><a href="#">Parent Directory</a>
<ul>
<li class="pft-directory"><a href="#">Child directory</a>
<ul>
<li class="pft-file ext-pdf">somefile.pdf
<ul></ul> <!-- this HTML code is generated from a php recursive function you will see it a lot (I'll fix that later) -->
</li>
<li class="pft-file ext-doc">somefile2.doc
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
</ul>
</li>
<li class="pft-directory"><a href="#">Another parent directory</a>
<ul>
<li class="pft-directory"><a href="#">Child directory</a>
<ul>
<li class="pft-file ext-docx">V1.docx
<ul></ul>
</li>
</ul>
<ul>
<li class="pft-directory"><a href="#">Child directory 2</a>
<ul>
<li class="pft-file ext-pdf">V2.pdf
<ul></ul>
</li>
<li class="pft-file ext-png">HH-V1.png
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
<li class="pft-directory"><a href="#">Child directory</a>
<ul></ul>
</li>
</ul>
</li>
<li class="pft-directory"><a href="#">Child directory 2</a>
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul>
<li class="pft-directory"><a href="#">Child directory 3</a>
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
<li class="pft-directory"><a href="#">Child directory 4</a>
<ul>
<li class="pft-file ext-pdf">HH-V1.pdf
<ul></ul>
</li>
</ul>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</body>
</html>