javascript - HTML 上的扩展部分

Question

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

Answer 1

您可以查看源代码。（简化的）操作部分在这里：

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

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

Answer 2

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

Answer 3

这可以从查看源代码中找到。请参考此代码，

HTML

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

JavaScript​</p>

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

在此示例中，我还增加了 div 的宽度，以便向您解释 jQuery css 函数的工作原理，以便您可以在移动 div 时设置其他 css 样式。请参考以下小提琴。

http://jsfiddle.net/TqCmB/