1

私はこのスクリプトを持っています: http://jsfiddle.net/Z8cuz/

jQuery コード:

$('.list').hide();
$('.close').hide();
var widthVal = false;
$('#left').click(function(){
    if(widthVal == false){
    $('#middle').hide('fade', 300);
    $('#right').hide('fade', 300, function(){
    $('#left').find('.list').show();
    $('#left').find('.close').show();
    $('#left').animate({
    width: "96%",
    opacity: 1
  }, 1000 );
    });
    widthVal == true;
    }
});
$('.close').click(function(){
    $(this).parent().animate({
    width: "30%",
    opacity: 1
  }, 1500 );
    widthVal == false;
    $('#middle').show();
    $('#right').show();
    $('.list').hide();
    $('.close').hide();
});

#leftdivをクリックすると問題なく動作しますが、 をクリックXすると、詳細が非表示になり、 が非表示Xに#middleなり、#rightタグが表示され、幅が 30% に設定されます。これを行いますが、96% の幅に戻ります。どうしてか分かりません...

4

2 に答える 2

3

これは、クリック イベントが DOM を伝播し、左側の div でクリック イベントを再度トリガーしているためです。e.stopPropagation();これを防ぐために使用します。閉じるコードを次のように変更するだけです。

$('.close').click(function (e) {
    e.stopPropagation();
    $(this).parent().animate({
        width: "30%",
        opacity: 1
    }, 1500);
    widthVal == false;
    $('#middle').show();
    $('#right').show();
    $('.list').hide();
    $('.close').hide();
});

jsFiddle の例

于 2013-08-23T14:54:03.187 に答える
1

常にreturn falseクリック ハンドラから。$('#left').clickそれ以外の場合、イベントは DOM でバブルアップし、それがトリガーされる理由でもあります

$('.close').click(function(){
    $(this).parent().animate({
    width: "30%",
    opacity: 1
  }, 1500 );
    widthVal == false;
    $('#middle').show();
    $('#right').show();
    $('.list').hide();
    $('.close').hide();
    return false;
});
于 2013-08-23T14:53:52.897 に答える