jQuery 启动另一个函数，但我不想要它

Question

我有这个脚本: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();
});

当我单击#left div时，它工作正常，但是当我单击X时，它应该隐藏详细信息，隐藏X >，显示 #middle 和 #right 标记并将宽度设置为 30%。它执行此操作，但随后又恢复到 96% 宽度。我不知道为什么...

Answer 1

这是因为您的点击事件正在 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 example