JQuery – 如何将外部内容加载到一个div中，使用滑动效果切换div，并自动向下滚动以查看扩展的div

在我的HTML页面上，我有：

4个图像排成一排，1个div直接坐在下面 – 倒塌了。

根据用户点击的图像，我想将相应的外部页面内容加载到该DIV中（使用ajaxpage.js？）。

当内容加载到DIV中时，DIV应该通过滑动操作切换打开。 （使用jquery.togglr.js？）

我还希望浏览器自动向下滚动到扩展的DIV，否则，用户可能看不到额外的内容已被切换打开。 滚动应该有缓动效果。 （使用jquery.scrollTo.js？）

最后，如果用户点击切换DIV打开的同一图像，它应该关闭DIV。 如果用户在DIV已打开的情况下单击另一个图像，则只需加载新内容，而无需关闭并打开DIV。

困难在于如何正确集成所有不同的jquery插件以获得所需的行为？

谢谢。

Answer 1

好吧，首先，你需要在4张图片上使用点击事件处理程序 ：

$('img.fourImageCssClass').click(function(){ // do something on click. $(this) is an object that represents your clicked image var imgSrc = $(this).attr('src'); }); 

接下来，您需要在单击处理函数中获取对

的引用：

 var yourDiv = $('#div-id'); 

然后你可以使用$ .ajax（）方法获取内容并将其加载到div中。 完成后， slideUp / slideDown函数将负责打开/关闭div。

最后要平滑滚动，您可以只为窗口的scrollTop属性设置动画。 要知道滚动到哪里，可以获得div的offset（）或postion（） 。