Question

我正在编写一些相当简单的函数。基本上，我有一个带有几个链接的导航栏。单击时，每个链接都显示以前显示的div：none。单击链接时，我希望导航栏缩小并向上移动。这是有效的，但似乎有点问题。

我有两个包含导航栏css的类。 “之前”是在单击链接之前具有导航栏的css的类。 “之后”用于点击链接后导致导航栏变小并向上移动。我在导航栏中有类似的链接类。

当我向函数添加持续时间时，会出现问题。我有一个名为“return”的链接，它将导航栏的类从“之后”更改为“之前”，并关闭打开的每个“页面”。当我将“after”类添加到导航栏之前单击此链接 - 在单击任何其他链接之前 - 导航栏移动就好像添加了“after”类然后删除 - 因此它变得更小然后更大再次。我希望“返回”链接在单击时不执行任何操作，导航栏仍处于“之前”状态。

现在我的代码是：

$(document).ready(function(){
    $("#main_index a").click(function(){
        $("#main_index").addClass("after", 500);
        $("#main_index a").addClass("after_link", 500);
     });
 });

$(document).ready(function(){
    $(".return").click(function(){
        $("#main_index").removeClass("after", 500);
        $("#main_index a").removeClass("after_link", 500);
     });
});

我尝试使用.hasClass向函数添加if语句，因此只有在存在正确的类时它才会运行但是当我这样做时函数不再有效。该代码是：

$(document).ready(function(){
    $("#main_index a").click(function(){
        if(("#main_index").hasClass("before")) {
            $("#main_index").addClass("after", 500);
            $("#main_index a").addClass("after_link", 500);
        }
     });
 });

$(document).ready(function(){
    $(".return").click(function(){
        if("#main_index").hasClass("after")) {
            $("#main_index").removeClass("after", 500);
            $("#main_index a").removeClass("after_link", 500);
        }
     });
});

我也试过在这里查找东西，但到目前为止还没有任何工作。我知道我搞砸了某个地方的代码，但我是JQuery的新手，我无法弄清楚为什么我正在做的事情不应该像它应该的那样。任何帮助，将不胜感激。

Answer 1

如果错了。你不需要两个准备好的。并且....... Addclass只需要一个agrument。

检查这个

$(document).ready(function(){
    $("#main_index a").click(function(){
        //if(("#main_index").hasClass("before"))
          if($("#main_index").hasClass("before")) {
            //$("#main_index").addClass("after", 500);
            $("#main_index").addClass("after");
            //$("#main_index a").addClass("after_link", 500);
            $("#main_index a").addClass("after_link");
        }
     });
     $(".return").click(function(){
        //if("#main_index").hasClass("after")) {
          if($("#main_index").hasClass("after")) {
            //$("#main_index").removeClass("after", 500);
            $("#main_index").removeClass("after");
            //$("#main_index a").removeClass("after_link", 500);
            $("#main_index a").removeClass("after_link");
        }
     });
 });

这是Jsfiddle Sample

如果您想要动画，请不要使用addClass。我想，您需要使用animate

Answer 2

明显的问题和解决方案（不能相信我没有看到它） - 因为第一个函数是用＃34; main_index a＆＃34;第二个是＆＃34; main_index＆＃34;它正在执行这两个功能，因为它被两者调用。在其他链接中添加了一个类，并为第一个函数调用了类，而不仅仅是＆＃34; main_index a＆＃34;并解决了这个问题。

JQuery函数与动画一起表现奇怪

2 个答案: