展开/折叠网页上的内容 [点击时也加载内容]

Question

我正在制作一个在一个页面上有不同全景图的网站

用 pano2vr gardengnomesoftware.com/pano2vr.php 制作

问题是我想将每个全景图隐藏在可展开的部分中。这样用户就可以向下滚动，然后打开他们想要的那个。

我一直在尝试不同的展开/折叠代码，例如这个

http://www.adipalaz.com/experiments/jquery/expand.html

还有这个

http://webcloud.se/code/jQuery-Collapse/

（我选择这些的原因是它们具有流畅的打开动画，一个图形会改变以显示它是打开还是关闭，并且您一次可以打开多个 [非手风琴风格]）

但是，第一个问题是如果全景图位于折叠部分中，则不会加载它们。 （如果我使用第二个脚本，它有 cookie 并记住一个部分是否打开，如果我打开包含全景图的部分并刷新页面，那么它将加载）

我也不希望它们（可扩展部分中的全景图/内容）在您打开页面时加载，因为每个都可以是 5mb+，所以我需要某种方式在您加载该部分中的内容时展开它。 （不幸的是，flash 和 html5 自动加载的全景图）

这是我用来在页面上加载全景图的代码：

<script type="text/javascript">
        // hide URL field on the iPhone/iPod touch
        function hideUrlBar() {

            if (window.pageYOffset==0) {
                window.scrollTo(0, 1);
                // repeat every second for slow rendering pages
                setTimeout(function() { hideUrlBar(); }, 3000);

            }
        }
    </script>

和

        <script type="text/javascript" src="pano2vr_player.js">
    </script>
    <script type="text/javascript" src="skin.js">
    </script>
    <div id="container" style="width:960px;height:540px;">
    This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
    </div>
    <script type="text/javascript">

        // create the panorama player with the container
        pano=new pano2vrPlayer("container");
        // add the skin object
        skin=new pano2vrSkin(pano);
        // load the configuration
        pano.readConfigUrl("some_panorama_name.xml");
        // hide the URL bar on the iPhone
        hideUrlBar();

    </script>

我看到过一些关于 ajax 的东西，但我不确定如何将它们全部绑定到 jQuery 中以使其工作。

我也确实认为我可以在隐藏部分中放置一个图像，它会说，单击此处加载全景图，然后使用一些代码将图像换成全景图，但我不知道我是怎么做的做吗？阿贾克斯？内嵌框架？

感谢您阅读本文！我想确保我在发布之前涵盖了所有内容。

Answer 1

这些插件最有可能提供您可以挂钩的事件。如果是这样，您可以将事件处理程序添加到“onExpand”（我假设）事件并使用 jQuery 的 append() 和 appendTo() 函数动态添加全景图像。所以当折叠面板展开时添加图片标签：

$("<img src='mypanorama.jpg' id='panorama1' />").appendTo("#collapsePanel1");

然后当它被折叠时删除图像标签（按 id）：

$("#panorama1").remove();