扩展HTML部分

Question

有这个网站http://www.phpvideotutorials.com/我基本上想要了解每个左右列在单击这些相应列时如何动态扩展，并在再次单击时从展开状态收缩。 我是网络开发的新手，至少是使用jQuery和东西的动态网站开发。

Answer 1

您可以查看the source code。 （简化）执行部分在这里：

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

因此它将click事件绑定到一个函数，该函数为元素的 right CSS属性设置动画。

Answer 2

这是通过一个名为jQuery http://jquery.com的javascript库完成的，您可以在那里阅读更多相关信息，并查看其工作原理示例。

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函数是如何工作的，这样你就可以在移动你的div时设置额外的css样式。请参考以下小提琴。

http://jsfiddle.net/TqCmB/