Question

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

这是因为您的点击事件正在向上传播，并再次触发左侧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

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

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

2 个答案: