带有动态内容淡入的jquery菜单

我有一个包含父类和子类的菜单。每个父类别都有一个单独的页面，其中包含子类别的所有内容。在用户单击菜单项之前，内容是隐藏的。当用户单击子类别时，主内容淡入。问题是：如果用户单击不同父类别的子类别（而不是他们当前所在的页面），则该子类别无效。它只显示它们所在页面的子类别的内容。我希望这是清楚的。最好的解决方案是什么

这是我的菜单：

 <div id="sidebar">
<ul>
    <li class="main">
        <a href="real_estate.php">Real Estate </a>
        <ul class="sub current" id="sub_real_estate">
            <li class="sub_1">Consulting Services</li>
            <li class="sub_2"> Investment</li>
            <li class="sub_3"> Property Management</li>
            <li class="sub_4"> Development</li>
        </ul>
    </li>
    <li class="main">
        <a href="investment.php">Investment</a>
        <ul class="sub" id="sub_investment">
            <li class="sub_1">Philosophy</li>
          <li class="sub_1">Criteria</li>
      </ul>
    </li>
</ul>
</div>

---

让你的子类别成为实际的链接（无论如何，为了可用性更好）。例如：

<li class="main">
    <a href="investment.php">Investment</a>
    <ul class="sub" id="sub_investment">
        <li class="sub_1"><a href="investment.php#philosophy">Philosophy</a></li>
        <li class="sub_1"><a href="investment.php#critera">Criteria</a></li>
    </ul>
</li>

冲洗并用任何其他选择器重复。这样，单击行为将仅应用于当前页面中的子类别；其他所有内容都将加载其他类别页面。此外，由于列表项现在是链接，添加

returnfalse到单击处理程序的底部。这将阻止浏览器在其href属性中加载URL

最后一项是检测页面加载时显示哪个子类别的方法：

if (location.hash) {
    $(location.hash).show();
}

这是基本的想法。修改这段代码以包含任何其他需要的效果或处理。它所做的一切基本上都是说“如果URL中有锚链接，则显示具有该id的元素。”

$(".active .sub li").click(function() {

if (location.hash) {
    $(location.hash).show();
}