如何讓一個div在點擊鏈接時打開

Question

我需要知道如何讓div在點擊鏈接時保持打開狀態。

EXAMPLE

請查看上面的例子。 A <div>包含a/link。當點擊<div>時，其類將被切換。我想阻止在點擊a/link時切斷課程。

下面是HTML：

<div id="out"> 
    <div class="content"> 
     <a>click here to learn more..</a> 
    </div> 
</div> 

<div class="side"> 
</div> 

這裏是JavaScript：

$(document).ready(function() { 
    $("#out").click(function(event) { 
     if (!$(event.target).is('a')){ 
      $(this).toggleClass("side"); 
     } 
    }); 
    $(".side").click(function() { 
     $(this).toggleClass("out"); 
    }); 
}); 

Answer 1

使用.stopPropagation()：

$(document).ready(function() { 
    $("#out").click(function() { 
     $(this).toggleClass("side"); 
    }); 
    $(".side").click(function() { 
     $(this).toggleClass("out"); 
    }); 
    $('.content a').click(function(e){e.stopPropagation();}) 
}); 

jsFiddle example

Answer 2

使toggleClass更改爲單擊的條件。如果您收集event對象作爲參數，則可以檢查它的目標是否爲鏈接，並且只在目標不是鏈接時才切換類。

$(document).ready(function() { 
    $("#out").click(function(event) { 
     if (!$(event.target).is('a')){ 
      $(this).toggleClass("side"); 
     } 
    }); 
    $(".side").click(function() { 
     $(this).toggleClass("out"); 
    }); 
}); 

例子：http://jsfiddle.net/4hpgb/2/