在HTML上擴展部分

Question

有本網站http://www.phpvideotutorials.com/我基本上想知道當點擊這些相應的列時，每個右側和左側列如何動態擴展，再次單擊時是否從展開狀態收縮。 我是新來的網站開發，至少使用jQuery和東西動態網站開發。

Answer 1

它使用名爲jQuery的JavaScript庫完成http://jquery.com您可以在這裏閱讀更多關於它的信息並查看它的工作原理示例。

Answer 2

您可以檢出the source code。 （簡化）執行部分是在這裏：

var dm = $('#developermonkey'); 
dm.bind('click', function(e) { 
    dm.animate({'right' : 400 }); 
}); 

因此它綁定一個click事件的函數，動畫元素的權 CSS屬性。

Answer 3

這可以從查看源中找到。請參考此代碼，

HTML

<div id="left">text 
<a id="lefta">click</a> 
</div> 

JavaScript

$('#lefta').bind('click', function(e) { 
    $('#left').css({'width' : 200 }); 
    $('#left').animate({'left' : 150 }, 400); 
}); 
​ 

下面例子中，我越來越DIV的寬度也以解釋你的jQuery CSS功能是如何工作的，這樣你可以用它來設置額外的CSS樣式，同時移動你的div。請參閱下面的小提琴。

http://jsfiddle.net/TqCmB/