當關閉下拉菜單時將div移回原始位置

首先，我想說明我已經完成了我的研究，但仍找不到解決方案。
我的目標是讓球在點擊時向左移動，然後一旦觀看者再次點擊球以關閉球就返回原來的位置。當關閉下拉菜單時將div移回原始位置

我使用這些線路動畫菜單和球
（與同伴計算器成員的幫助）

jQuery(document).ready(function() { 
jQuery(".RXMENU").hide(); 

jQuery(".RXCLICK").click(function() { 
$(".ACTIVE").removeClass("ACTIVE"); 
$(this).addClass("ACTIVE"); 
    jQuery(this).next(".RXMENU").slideToggle(500); 
     jQuery(".RXCLICK").animate({ 
     right: "56" 
    }); 

}); 

});

我嘗試使用此代碼來球向後移動//

jQuery(".RXMENU").hide(); 
jQuery(".RXCLICK").click(function() { 
     jQuery(".RXCLICK").animate({ 
     right: "-56" 
    }); 
});

我認爲使用負數的位置會使差異，但我顯然是錯的。更改「隱藏」到「顯示」具有相同的結果，我點擊球關閉菜單後，球抖動了一下，但它不會移回到我希望的位置。

這裏是更新的fiddle。我的問題是：如何讓代碼工作？爲了將球恢復到原始位置，需要哪些功能？

所有幫助表示感謝！

來源

2014-01-23 KXXT

你是爲同一個對象，這導致-56px + 56px = 0像素=運行兩次點擊功能的對象保持不變。

基本上，你只需要注意何時球沒有移動，然後移動它，或者如果已經移動 - 然後將其移回。對？是的，向移動的球添加一個「積極」類可能是一個解決方案。就簡單性而言，我使用'$'作爲'jQuery'標識符。這裏是一些東西，工作（只是將其複製粘貼到您的jsfiddle爲例）：

(function(){ 

    $(".RXMENU").hide(); 
    $(".RXCLICK").click(function() { 
     if ($(this).hasClass('ACTIVE')){ 
      $(".RXMENU").slideToggle(500); 
      $(this).animate({right: "-=56px"},'slow').removeClass('ACTIVE'); 
     } else { 
      $(".ACTIVE").removeClass("ACTIVE"); 
      $(this).next(".RXMENU").slideToggle(500); 
      $(this).addClass("ACTIVE").animate({right: "+=56px"},'slow'); 
     } 
    }); 

})();

來源

2014-01-23 23:39:32 Hristo

是的，當然你可以使用全局狀態變量，而不是主動類......但我寧願堅持因爲關於對象是否處於活動狀態的信息仍然存在於對象中（閉合狀態）。 – Hristo

說實話，我不知道這意味着什麼。（我在jQuery中根本沒有經驗）但是你提供的代碼修復了我的另一個問題，所以我也接受了你的答案。非常感謝！ – KXXT

你是絕對正確的，全球範圍是一個嚴重的錯誤。我已將其移入關閉。順便說一句：@keilowe你只能接受一個答案。通過接受第二個，你無意中將它從我的手中刪除了;）但這裏沒有任何爭論，只是爲了讓你知道，keilowe。 – pid

您有2個事件附加到click事件。只是一個就夠了：

jQuery(document).ready(function() { 
    var moved = false; 

    jQuery(".RXMENU").hide(); 
    jQuery(".RXCLICK").click(function() { 
     $(".ACTIVE").removeClass("ACTIVE"); 
     $(this).addClass("ACTIVE"); 
     jQuery(this).next(".RXMENU").slideToggle(500); 

     jQuery(".RXCLICK").animate({ 
      right: moved ? "0" : "56" // move right by 56 pixels relative to original position 
     }); 
     moved = !moved; // toggle state 
    }); 
});

來源

2014-01-23 23:20:40 pid

當關閉下拉菜單時將div移回原始位置

回答

相關問題