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

我认为使用负面的位置会有所不同，但我显然是错的。改变＆＃34;隐藏＆＃34;到＆＃34;显示＆＃34;有相同的结果，在我点击球关闭菜单后，球摇摇头，但它并没有回到我希望的位置。

以下是更新的fiddle。

我的问题是：如何让代码工作？为了将球动画回原来的位置需要什么功能？

所有帮助表示赞赏！

Answer 1

您为同一个对象运行了两次click操作，导致-56px + 56px = 0px =对象仍然存在。

基本上，您只需要注意球何时不移动，然后移动它，或者如果已经移动 - 然后将其移回。对？添加课程＆＃39;有效＆＃39;移动球可能是一个解决方案，是的。在简单性方面，我使用了＆＃39; $＆＃39;对于＆＃39; jQuery＆＃39;标识符。以下是可行的（只需将其复制粘贴到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个事件。只要一个就足够了：

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

关闭下拉菜单时将div移回原始位置

2 个答案: