Question

我有以下jQuery代码（我的第一个自制的jQuery代码，所以不要对我太难:)）。 Eveything第一次使用切换时效果很好：

我点击右侧切换，＃content移动，左侧切换显示。
我点击左侧切换，#content向后移动，右侧切换出现。（一切都回到起始位置）。

但在那之后，我的右切换不再可以点击（但确实会出现）。我想一遍又一遍地做同样的事情（点击右切换，＃content移动等等）。但是根据我目前的代码，我只能做一次这个动画。

任何人都可以帮助我:)

提前致谢:)

    //starting values 
    $(".rowToggleL").off('click');    
    $(".rowToggleR").on('click'); 

    //Right Toggle
    $(".rowToggleR").click(function () {

        // make Toggle Right unclickable, make Toggle Left clickable
        $(".rowToggleR").off('click'); 
        $(".rowToggleL").on('click'); 


        //animate contentbox
        $("#content").animate({
            left: "-=300" // animate to the right
        }, 800, 

         // Animation complete. Make Toggle Right invisible, make Toggle Left visible 
        function() {
            $(".rowToggleR").css("display", "none");
            $(".rowToggleL").css("display", "inline");
        });


    });

    //Left Toggle
    $(".rowToggleL").click(function () {

        // make Toggle Left  unclickable, make Toggle Right clickable
        $(".rowToggleL").off('click');    
        $(".rowToggleR").on('click'); 

     //animate contentbox
        $("#content").animate({
            left: "+=300" // animate to the right
        }, 800, 

         // Animation complete. Make Toggle Left invisible, make Toggle Right visible.
        function() {
            $(".rowToggleL").css("display", "none");

            $(".rowToggleR").css("display", "inline");   
        });

    });

Answer 1

你有很多不必要的代码。你不需要打开和关闭。此外，jquery还具有隐藏和显示功能。这应该有效：

//Right Toggle
$(".rowToggleR").click(function() {
    //animate contentbox
    $("#content").animate({
        left: "-=300" // animate to the right
    }, 800,
            // Animation complete. Make Toggle Right invisible, make Toggle Left visible 
                    function() {
                        $(".rowToggleR").hide();
                        $(".rowToggleL").show();
                    });


        });

//Left Toggle
$(".rowToggleL").click(function() {
    //animate contentbox
    $("#content").animate({
        left: "+=300" // animate to the right
    }, 800,
            // Animation complete. Make Toggle Left invisible, make Toggle Right visible.
                    function() {
                        $(".rowToggleL").hide();
                        $(".rowToggleR").show();
                    });

        });

Answer 2

因为jQuery的开启和关闭不会切换以前设置的处理程序！

当您致电on()时，您会向事件添加处理程序（函数）。但是，当您致电off()时，您会移除所有附加到某个活动的处理程序。

当您致电on('click')时，您不会重新激活之前设置的处理程序：

$(".rowToggleR").click(function () {});  // Which equals $(".rowToggleR").on('click', function () {});

但是，您可以添加另一个功能，以便在单击时调用。

Jquery的$（＆＃39; #element＆＃39;）。开/关在第二次之后不起作用

2 个答案: