Question

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

这是我的菜单：

 <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>

这是jquery：

$(document).ready(function() {
$(".main").hover(function() {
    $(".sub", this).slideDown('slow');
},
function() {
    $(".sub", this).not(".current").slideUp('slow');
});

$(".sub li").click(function() {
    var menuID = $(this).attr("class");
    var substr = menuID.split('_');
    $(".sub li").removeClass("highlight");
    $(this).addClass("highlight");
    $("#main_content").removeClass("active");
    $(".active").hide();
    $("div#real_" + substr[1]).addClass("active");
    $("div#real_" + substr[1]).fadeIn("slow");
});
});

Answer 1

使您的子类别成为实际链接（无论如何，更适合可用性）。例如：

<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>

适当地分配这些部分的ID。换句话说，“哲学”部分的容器将获得id="philosophy"。然后，即使禁用了JavaScript，链接也会将用户带到文档中的正确位置。

现在，对于潜在的棘手部分。您需要一种区分应由JavaScript处理的链接（活动类别的子类别）和应该加载新页面的链接（其他子类别）。我建议在当前类别中添加一个诸如“active”之类的类，这很容易在服务器端完成。然后你只需修改你的选择器：

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

用任何其他选择剂冲洗并重复。这样，点击行为将仅应用于当前页面中的子类别;其他一切将加载其他类别页面。此外，由于列表项现在是链接，因此将return false;添加到点击处理程序的底部。这将阻止浏览器在其href属性中加载URL

最后一部分是一种检测页面加载时要显示的子类别的方法：

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

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

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

1 个答案: