JQuery，隐藏在 Firefox 中不起作用

Question

我目前正在为我的大学的开源研究项目构建一个非常简单的网站。 我正在使用 JQuery 为网站的子导航设置动画。 但是，我的代码似乎只能在 IE 中运行，而不能在 Firefox 或 Chrome 中运行。

我不确定这是兼容性问题还是我的问题。 我在网上查找了示例，但我没有发现代码有任何差异，无法解释为什么我的代码不起作用。

该网站部分的 HTML 如下：

<!-- START NAVIGATION & SUB NAVIGATION -->
<div class="nav">
    <ul>
        <li><a class="nav_home" href='#'><span>home</span></a></li>
        <li><a class="nav_about" href="#"><span>about</span></a></li>
        <li><a><span>research</span></a></li>
        <li><a><span>findings</span></a></li>
        <li><a><span>contact</span></a></li>
    </ul>
</div>
<div class="sub_nav">
    <ul class="sub_nav_home">
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
    </ul>
    <ul class="sub_nav_about">
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
    </ul>
</div>
<!-- FINISH NAVIGATION -->

**注意：这只是测试信息，以确保我可以在实现实际内容之前使导航正常工作。 此外，只有前两个链接有效。 在我开始工作之前，我认为没有必要将它们全部实现。

JavaScript 如下：

var current_sub = 0;

$(document).ready(function() {
    //hide elements
    $("div.sub_nav > ul").hide();

    function get_sub_navigation(nav_name)
    {
        if(current_sub != 0)
        {
            $(current_sub).fadeOut("slow", function ()
            {
                $(nav_name).slideDown("slow");
            });
        }
        else
        {
            $(nav_name).slideDown("slow");
        }
        current_sub = nav_name;
    }

    $("a.nav_home").click(function(event)
    {
        event.preventDefault();
        get_sub_navigation("ul.sub_nav_home");
    }
);
$("a.nav_about").click(function(event)
    {
        event.preventDefault();
        get_sub_navigation("ul.sub_nav_about");
    }
);
});

好的，第一件事就是隐藏所有子导航列表。 然后我有一个监听器，用于监听两个应该调用 get_sub_navigation 的导航链接。 该函数将检查是否有显示（仅使用 0 表示默认/无），如果有隐藏它，如果没有，则显示一个。

正如您所看到的，它不是完成的代码，但是，在我弄清楚这一点之前，我不想进一步移动。

任何帮助深表感谢！

Answer 1

调用 event.preventDefault() 在您的事件处理程序中，而不是在导航函数中的 $(nav_name).preventDefault() （或将事件传递到其中）。 我怀疑默认设置没有被阻止，并且页面正在被重新绘制。

Answer 2

，要在页面加载时默认隐藏 ul 元素，您可以简单地使用 css 而不是 javascript：（

div.sub_nav > ul { visibility: hidden; }

尽管我不是 100% IE <= 6.0，但使用此选择器将 100% OK）

首先 我绝不是 jQuery 专家，我想既然选择器返回多个元素，它就需要不同的方法。

尝试

$("div.sub_nav > ul").each( function() {
    $(this).hide();
});

Answer 3

好的，我已经在 Firefox 和 Chrome 中显示了 ul。 问题是您在定义它之前调用了 current_sub 。 这会导致它失败。 我认为这应该解决它。

    $(document).ready(function() {
    //hide elements
    $("div.sub_nav ul").hide();

    function get_sub_navigation(nav_name)
    {
    current_sub = nav_name;
    display = $(current_sub).css("display");
       if(display == "none")
        {
                $(current_sub).slideDown("slow");
        }
        else
        {
                $(current_sub).fadeOut("slow");
        }

    }

    $("a.nav_home").click(function(event)
        {
                event.preventDefault();
                get_sub_navigation("ul.sub_nav_home");
        }
);
    $("a.nav_about").click(function(event)
        {
                event.preventDefault();
                get_sub_navigation("ul.sub_nav_about");
        }
);
});