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

Question

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

由pano2vr gardengnamesoftware.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中以使其工作。

我也确实认为我可以在隐藏的部分中有一个图像，它会说，单击此处加载全景图，然后使用一些代码将图像替换为全景图，但我不知道如何做到这一点？ajax？iframe？

感谢你读到这里！在发帖之前，我想确保我涵盖了所有的内容。

Answer 1

这些插件很可能提供您可以连接到的事件。如果是这样，您可以向"onExpand“(我假设)事件添加一个事件处理程序，并使用jQuery的append()和appendTo()函数动态添加全景图像。因此，当展开折叠面板时，添加图像标记：

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

然后，当它被折叠时，删除图像标记(通过id)：

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