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＆lt; = 6.0将使用此选择器100％正常）

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

JQuery，隐藏不在Firefox中工作

3 个答案: