当关闭下拉菜单时将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移回原始位置

回答

相关问题