<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body> <div> <span class="color">深咖色</span> <div class="cc"></div> </div> <div> <span class="size">11*11</span> <div class="bb"></div> </div> </body> </html>
1 .color,.size{ font-size:14px; color:black;} 2 .cc{ width:300px;height:100px;background:red;} 3 .bb{ width:300px;height:100px;background:red;}
第一種是簡單的顯示和隱藏，使用了bind（）和toggle（）；
1 $(function(){ 2 $(".color").bind("click",function(){ $(this).next(".cc").toggle();}); 3 $(".size").bind("click",function(){ $(this).next(".bb").toggle();}); 4 });
toggle()方法自己就有顯示隱藏的作用。
但是這段js的缺點是，當我點擊“深咖色”顯示紅色方塊，再次點擊“11*11”時，綠色方塊出現，但是紅色方塊也不會隱藏，如圖：
第二種方法：改進上述的缺點，當再次點擊時，隱藏其他，只出現點擊出現的相應內容。
$(function(){
$(".color").bind("click",function(){ $(this).next(".cc").show(); $(".bb").hide(); }); $(".size").bind("click",function(){ $(this).next(".bb").show(); $(".cc").hide(); }); });
第三種，在第二種的基礎上添加，當點擊顯示時，出現相應內容，點擊其他消失，或者點擊其他空白處消失。
$(function(){ $(".color").bind("click",function(){ $(this).next(".cc").show(); $(".bb").hide(); }); $(".size").bind("click",function(){ $(this).next(".bb").show(); $(".cc").hide(); }); $(".color").on("click", function(e){ $(document).one("click", function(){ $(".cc").hide(); $(".bb").hide(); }); e.stopPropagation(); }); $(".cc").on("click", function(e){ e.stopPropagation(); }); $(".size").on("click", function(e){ $(document).one("click", function(){ $(".bb").hide(); $(".cc").hide(); }); e.stopPropagation(); }); $(".bb").on("click", function(e){ e.stopPropagation(); }); });
one() 方法為被選元素附加一個或多個事件處理程序，並規定當事件發生時運行的函數。
當使用 one() 方法時，每個元素只能運行一次事件處理器函數。