Jquery 如何链接或制作相关的两个不同内容

这是我的代码片段：

$（'body'）。在（'click'，'show'，function（）上{
$（'li'）.removeClass（'active'）；
$（'show'）.removeClass（'open'）；
$（this.parent（）.addClass（'active'）；
$（this.addClass（'open'）；
if（$（'#first'）.hasClass（'active'））{
$（“#第一个孩子”）.show（）；
}否则{
$（“#第一个孩子”）.hide（）；
};
if（$（'#second'）.hasClass（'active'））{
$（“#第二个孩子”）.show（）；
}否则{
$（“#第二个孩子”）.hide（）；
};
if（$（'third'）.hasClass（'active'））{
$（“#第三个孩子”）.show（）；
}否则{
$（“#第三个孩子”）.hide（）；
};
});
$（'body'）。在（'click'，'show.open'，function（）上{
$（this.parent（）.removeClass（'active'）；
$（this.removeClass（'open'）；
$（“.child”）.hide（）；
});
ul，
李{
列表样式：上alpha；
}
.表演{
光标：指针；
}
.主动{
左边框：3px实心#ccc；
}
.孩子{
显示：无；
}



许多内容
更多可点击的内容


许多内容
更多可点击的内容


许多内容
更多可点击的内容


A.报告的相关内容
B.报告的相关内容
C.报告的相关内容
您可以使用数据属性

<li id="first" data-id="first-child"></li>

更新

你在表演课上跳过了点

$('.show').removeClass('open');

@user1896653答案您可以在这里找到，您可以使用带有前缀的类。这种方法应该适用于任何浏览器！你能帮我一件事吗。实际上，我并不擅长jQuery。这就是为什么，我不明白为什么会这样。问题是：如果你点击A“更多可点击内容”，然后点击B“更多…”，然后点击C“更多…”，然后再点击A“更多…”第一次点击时，A的相关内容不会显示，而是双击显示@user1896653你有什么问题？嘿！别理它。我找到了原因。我错过了此行中show类的“.”：$（'show'）.removeClass（'open'）；谢谢你的帮助。
$('.show').removeClass('open');