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

Question

首先，我想指出我已經完成了研究，但仍然找不到解決方案。
我的目標是在單擊時使球向左移動，然后一旦觀眾再次單擊球以將其關閉，便將球返回其原始位置。

我正在使用這些行為菜單和球設置動畫
（在同一個stackoverflow成員的幫助下）

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"
    });  
});

我認為對職位使用負數會有所作為，但我顯然錯了。 將“隱藏”更改為“顯示”具有相同的結果，在我單擊球以關閉菜單后，球會搖動一點，但不會退回到我想要的位置。

這是更新的小提琴 。

我的問題是：如何使代碼正常工作？ 為了使球動畫回到其原始位置，需要什么功能？

所有幫助表示贊賞！

Answer 1

您對同一對象運行了兩次click函數，結果是-56px + 56px = 0px =該對象保持原位。

基本上，您只需要注意何時不移動球，然后將其移動，或者如果已經移動，則將其移回即可。 對？ 是的，將類“ active”添加到移動的球可能是一種解決方案。 為簡單起見，我將'$'用作'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');
        }
    });

})();

Answer 2

您將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
    });
});