javascript - 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() (或将事件传递到其中)。我怀疑默认设置没有被阻止，并且页面正在被重绘。