JQuery與.toggle .css

Question

我有一個顯示200像素的div。當我點擊div中的圖像時，我想顯示1000px。 然後再次點擊時再次接近200px。

這是我的代碼：

<script type="text/javascript"> 
$(document).ready(function() { 
    // shows the slickbox DIV on clicking the link with an ID of "slick-show" 

$('#slickbox').css("height", "200px");  
$('#slick-show').click(function() { 
     $('#slickbox').toggle(function() { 
    $("#slickbox").css("height", "1000px"); 
}, function() { 
    $("#slickbox").css("height", "200px"); 
     }); 
}); 
return false; 

}); 
</script> 

<div id="slickbox" style="height: 1000px;"> 
<p style="text-align: center;"> 
<a id="slick-show" href="#"><img src="/ImageVaultFiles/id_468115/cf_69211/Happy_monday14-5.jpg" border="0" alt="Happy_monday14-5" /></a></p> 
</div> 

的代碼工作，但我也有第一次開啓後每一次雙擊。對於不同的樣式或寬度或高度或任何

和

Answer 1

你濫用toggle。

http://api.jquery.com/toggle-event/

描述：綁定兩個或更多個處理程序來匹配的元素，可以在交替的點擊執行。

toggle應該只調用一次。它將綁定點擊處理程序，這將觸發交替點擊。你正在做的是每次點擊時重新綁定點擊處理程序。你真正想要做的是這樣的：

$('#slickbox').css("height", "200px");  
$('#slick-show').toggle(function() { 
    $("#slickbox").css("height", "1000px"); 
}, function() { 
    $("#slickbox").css("height", "200px"); 
}); 

Answer 2

使用CSS類，然後使用

http://api.jquery.com/toggleClass/

用於切換任何風格

Answer 3

此監守你連接切換功能，點擊元素後，應避免。點擊：

$(function() { 
     // shows the slickbox DIV on clicking the link with an ID of "slick-show" 

    $('#slickbox').css("height", "200px");  
    $('#slick-show').toggle(function() { 
     $("#slickbox").css("height", "1000px"); 
    }, function() { 
     $("#slickbox").css("height", "200px"); 
      }); 
    }); 

Answer 4

的。點擊（）和.toggle（）是多餘的 - .toggle（）假定有人將點擊一個元素。請參閱文檔中的說明：「將兩個或多個處理程序綁定到匹配的元素，以便在其他點擊上執行。」剛剛離開了。點擊（），你會得到你想要的行爲..

$(document).ready(function() { 
    $('#slickbox').css("height", "200px"); 
    $('#slick-show').toggle(function() { 
     $("#slickbox").css("height", "1000px"); 
    }, function() { 
      $("#slickbox").css("height", "200px"); 
     }); 
})​ 

Answer 5

是啊，你toggle函數不正確。這裏有一個工作示例：

http://jsfiddle.net/LsdUQ/