0

クリックすると下に展開する div があります。ただし、div が開いたら、div 内にある矢印をクリックして、div を元の高さに戻す必要があります。矢印がクリックされるたびに、周囲のdiv内でもクリックしているため、divがすぐに元の状態に戻るため、問題が発生しています。矢印だけがクリックされ、そのアクションが周囲の div のアクションをオーバーライドすることを確認する方法はありますか? アニメーションのコードは次のとおりです。

$("#box1").click(function () {
    var $this = $(this),
    val = 500;
    $this.stop().animate({
        width: '100%',
        height: val
    }, "slow");
    $("#cat_title1").stop().hide("slow");
    $("#cat_content1").stop().show("slow");
    $("#up1").stop().show("slow");
});

$("#up1").click(function () {
    $("#cat_content1").stop().hide("slow");
    $("#up1").stop().hide("slow");
    val = 100;
    $("#box1").stop().animate({
        width: '100%',
        height: val
    }, "slow");
    $("#cat_title1").stop().show("slow");
});

「#box1」はdivで、クリックすると展開します。

次に、「#up1」という div 内に表示される矢印があります。これをクリックすると、div がアニメーション化され、展開されていないフォームに戻ります。

ご協力いただきありがとうございます。

一番、

4

1 に答える 1

4

これに変更します。

$("#up1").click(function (e) {
    e.stopPropagation();
    $("#cat_content1").stop().hide("slow");
    $("#up1").stop().hide("slow");
    val = 100;
    $("#box1").stop().animate({
        width: '100%',
        height: val
    }, "slow");
    $("#cat_title1").stop().show("slow");
});

e.stopPropagation()イベントが親 div にバブリングするのを防ぎ、親 div のクリック ハンドラーはトリガーされません。

于 2013-08-14T20:41:29.283 に答える