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

其次，虽然我绝不是 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");
        }
);
});