jquery - 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();
});

当我单击#leftdiv 时，它可以正常工作，但是当我单击 时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 示例

Answer 2

始终return false来自您的点击处理程序。否则事件会在 DOM 中冒泡，这就是为什么$('#left').click也会触发

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