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和左格設置觸發再次單擊事件。使用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; 
});