JQuery函数动作奇怪

我正在写几个相当简单的函数。从本质上讲，我有一个导航栏与几个链接。点击后，每个链接都会显示之前显示的div：无。点击链接时，我希望导航栏缩小并向上移动。这是行得通的，但似乎有点问题。JQuery函数动作奇怪

我有两个类包含导航栏的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的新手，我无法弄清楚为什么我所做的并不像它应该那样工作。任何帮助，将不胜感激。

来源

2016-04-20 flyingstarship

你可以在这里添加jsfiddle，这样我们可以很容易地知道你的问题。谢谢:) – DevBert

对不起，但我不能让jsfiddle工作...我从来没有使用过该网站之前 – flyingstarship

如果是错误的。而且你不需要两个准备。而...... Addclass只需要一个填数。

检查这个

$(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

来源

2016-04-20 02:52:12 yongsup

我知道它的工作方式 - 这是我以前的。我想添加一个转换到函数，所以它不是波涛汹涌（我发现这里：http://api.jqueryui.com/removeclass/）。它在很大程度上起作用，只是最后一个链接奇怪地起作用。 – flyingstarship

什么是最后一个链接？这与其他元素相同吗？请告诉我你的DOM – yongsup

明显的问题和解决方案（不能相信我没看出来） - 由于第一函数被调用以“main_index了”，第二个具有“main_index中的链接“它正在执行这两种功能，因为它们都被两者调用。向其他链接添加了一个类，并为第一个函数调用了类，而不是“main_index a”，并解决了问题。

来源

2016-04-20 23:18:45 flyingstarship

JQuery函数动作奇怪

回答

相关问题