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函數動作奇怪

回答

相關問題