-1

さて、この質問は少し奇妙で説明するのが難しいので、私はそれにショットを与えますアイデアは十分に簡単に見えました

divの任意の場所を1回クリックすると、divの幅が450から1400pxになり、ページ上の他の2つのdivが非表示になり、右上隅でクリックして閉じるためのimgが追加されます。終わり。

次に、imgをクリックすると、divのサイズが450pxに変更され、他のdivが戻ってきて、imgが非表示になります。終わり。

私の問題は、imgをクリックした後です。サイズを変更してから1400pxに戻り、再び表示を開始している他の2つのdivを非表示にします。divクリックイベントに戻らないようにします。

これがjqueryです。

$(document).ready(function() {
 $(".close").hide();
 $("#leftdiv").click(function(){

  $("#leftdiv").animate({
   width: "1400px",
   height: "450px"
    },1000);
    $("#middlediv, #rightdiv").hide(500);
    $(".close").show(500);

$("#leftdiv").css({"-webkit-animation":"bounce 0s 0s"});

});

$("#leftdiv .close").click(function(){
    $("#leftdiv").stop().animate({
        width: "450px",
        height: "450px"
    },1000);
$(".close").hide();
       $("#middlediv, #rightdiv").show(500);
       });    
   });

私はjqueryを学ぼうとしています。これまでにhtmlcssを実行したことがあるので、脳を包み込もうとしています。jqueryの実行方法を知りたいと思います。

4

1 に答える 1

0

このようなものを使いたいと思うかもしれません。基本的に、必要のないクリック ハンドラーを追加したり削除したりします。 

$("#leftdiv").on('click', leftDivClickHandler);

function leftDivClickHandler(event)
{
    $("#leftdiv").off('click', leftDivClickHandler);

    $("#leftdiv").animate({
        width: "1400px",
        height: "450px"
    },1000, function() {
        $("#leftdiv .close").on('click', closeDiv);
    });
    $("#middlediv, #rightdiv").hide(500);
    $(".close").show(500);

    $("#leftdiv").css({"-webkit-animation":"bounce 0s 0s"});

  });
  event.preventDefault();
}

function closeDiv(event) 
{
    $("#leftdiv .close").off('click', closeDiv);

    $("#leftdiv").stop().animate({
        width: "450px",
        height: "450px"
    },1000, function() {
         $("#leftdiv").on('click', leftDivClickHandler);
    });

    $(".close").hide();
    $("#middlediv, #rightdiv").show(500);

    event.preventDefault();
}
于 2012-06-21T02:41:19.463 に答える