我不能为我的生活弄清楚为什么Sub1和Sub2下的文字在点击它们时不显示它们下面的文字。只有第一个链接“主类别”功能。它让我输入更多描述，虽然问题已经解释了我所知道的最好的。
<!DOCTYPE html>
<?php
session_start();
print "
<html>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#body {
font-family: 'Helvetica', Arial, sans-serif;
display:none;
width: 100%;
padding: 5px 0;
text-align: left;
background-color: lightblue;
margin-top: 5px;}
</style>
</head>
<body>
<div id="body12">
<a href='#' class='articleTitle'><font size="+1">Main Category</font></a>
<div class='showArticle'>
<a href='#' class='commentsTitle'><font size="+1">Sub1</font></a>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
<a href='#' class='commentsTitle'><font size="+1">Sub2</font></a>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
</script>
</body>
</html>
你的JS $('.commentsTitle').click(...中有一个拼写错误在你分配了类commentsTitle的html中，在JS中，你提到了commentTitle。
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentsTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentsTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});<body>
<div id="body12">
<a href='#' class='articleTitle'><font size="+1">Main Category</font></a>
<div class='showArticle'>
<a href='#' class='commentsTitle'><font size="+1">Sub1</font></a>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
<a href='#' class='commentsTitle'><font size="+1">Sub2</font></a>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
</body>
</html>