使用ajax和jquery将内容加载到可扩展的DIV中

我想使用可折叠div向用户显示和隐藏内容

我找到了执行展开和折叠的jQuery代码：

但是，内容已经加载到divs中（只是从视图中隐藏）

于是我发现：

它会将内容加载到打开的div中，但在关闭时也会将其卸载

然而，它与jquerymobile混合在一起，因此成为了一种风格。 我想能够自己设计这些舞曲。另外，第一个示例使用漂亮的反弹或淡入淡出效果将内容带入视图

这样做的原因是，我想向用户显示不同的内容，如图像或flash文件，但我不希望所有内容都加载到页面上，这将是太多的东西

---

那么，如何使用第一个jQuery折叠示例，但在中加载外部页面？

下面是我制作的一个示例：

         $(document).ready(function () {
               $('.accordian_body').hide();
                 });


         $('.accordian_head').click(function () {
            $(this).next().animate(
        { 'height': 'toggle' }, 'fast'
        );

然后是HTML

   <div class="accordian_head"></div>
   <div class="accordian_body"></div>

在CSS中，你可以随心所欲地设计头部和身体的样式，以便在后面添加代码-

   <asp:Literal ID="lit1" runat="server" />


    foreach(DataRow dr in DataTable.Rows)
     {
         lit1.Text = lit1.Text + "<div class=\"accordian_head\">" Whatever you want... "</div><div class=\"accordian_body\">" Whatever in body "</div>
      }

foreach（DataTable.Rows中的DataRow dr）
{
lit1.Text=lit1.Text+“你想要什么…”“身体里的什么”
}

检查这个问题，它是在php中，并显示如何加载到DIV的外部链接。Ajax只能加载内部页面，不能跨域工作。

我喜欢这个问题，所以我花了一点时间制作了一些接近插件的东西：

//only run the event handler for collapsible widgets with the "data-url" attribute
$(document).delegate('.ui-collapsible[data-url] > .ui-collapsible-heading', 'click', function () {

    //cache the collapsible content area for later use
    var $this = $(this).siblings('.ui-collapsible-content');

    //check if this widget has been initialized yet
    if (typeof $this.data('state') === 'undefined') {

        //initialize this widget

        //update icon to gear to show loading (best icon in the set...)
        $this.siblings('.ui-collapsible-heading').find('.ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-gear')

        //create AJAX request for data, in this case I'm using JSONP for cross-domain abilities
        $.ajax({

            //use the URL specified as a data-attribute on the widget
            url           : $this.closest('.ui-collapsible').data('url'),
            type          : 'get',
            dataType      : 'jsonp',
            success       : function (response) {

                //get the height of the new content so we can animate it into view later
                var $testEle   = $('<div style="position:absolute;left:-9999px;">' + response.copy + '</div>');
                $('body').append($testEle);
                var calcHeight = $testEle.height();

                //remove the test element
                $testEle.remove();

                //get data to store for this widget, also set state
                $this.data({
                    state         : 'expanded',
                    height        : calcHeight,
                    paddingTop    : 10,
                    paddingBottom : 10

                //add the new content to the widget and update it's css to get ready for being animated into view
                }).html('<p>' + response.copy + '</p>').css({
                    height        : 0,
                    opacity       : 0,
                    paddingTop    : 0,
                    paddingBottom : 0,
                    overflow      : 'hidden',
                    display       : 'block'

                //now animate the new content into view
                }).animate({
                    height        : calcHeight,
                    opacity       : 1,
                    paddingTop    : $this.data('paddingTop'),
                    paddingBottom : $this.data('paddingBottom')
                }, 500);

                //re-update icon to minus
                $this.siblings('.ui-collapsible-heading').find('.ui-icon').addClass('ui-icon-minus').removeClass('ui-icon-gear')
            },

            //don't forget to handle errors, in this case I'm just outputting the textual message that jQuery outputs for AJAX errors
            error         : function (a, b, c) { console.log(b); }
        });
    } else {

        //the widget has already been initialized, so now decide whether to open or close it
        if ($this.data('state') === 'expanded') {

            //update state and animate out of view
            $this.data('state', 'collapsed').animate({
                height        : 0,
                opacity       : 0,
                paddingTop    : 0,
                paddingBottom : 0
            }, 500);
        } else {

            //update state and animate into view
            $this.data('state', 'expanded').animate({
                height        : $this.data('height'),
                opacity       : 1,
                paddingTop    : $this.data('paddingTop'),
                paddingBottom : $this.data('paddingBottom')
            }, 500);
        }
    }

    //always return false to handle opening/closing the widget by ourselves
    return false;
});​

jQuery Mobile添加的默认填充是

10px

，对于顶部填充和底部填充，我将这些值作为数据属性添加到每个小部件以保持默认值

---

请注意，此代码可以稍微调整以显示其他类型的内容，我使用JSONP只是因为您可以在JSFIDLE上使用它。

这个问题不是很具体，也不清楚，但我会尽我所能理解您的目的。听起来您想使用

ajax

进行服务器调用并替换崩溃的内容

div

和ajax响应字符串。我想使用这个：但是让来自不同页面的内容加载到该区域中。就像这样：但是使用样式和额外的选项（例如动画），第一个链接（jQuery崩溃）给你。这有帮助吗？你可能会发现这很有帮助：我想你在第一段代码的末尾漏掉了一个}）。我尝试在JSFIDLE中实现这一点，但没有成功。我是这类东西的初学者，所以我可能没有正确地实现它。这里没有Ajax，内容只是预加载到divs中。如果你想让它在JSFIDLE中工作-你必须在head和body div中放一些东西，我只是在做一个示例，因为你说你想动态填充它们-所以我提供了asp:Literal来从后面的代码填充它们。我可以用第一个链接示例预加载内容，这不是我想做的，因为加载太多h东西。我想让用户说什么时候加载内容。因为他们可能不想这样。@Scott，哦，我明白了。我想知道asp东西。是的，它将是一个php页面，所以它确实需要jquery和ajax。感谢您尝试我想链接的页面在我的域内，一个充满图片，另一个有flash文件。我想加载它当用户点击页面时，而不是在创建页面时。我的页面已经是php并为此加载了值。我现在正在尝试，但无论我做什么，文本都会被截断。即使我直接从jsfiddle:S复制代码，但这似乎是正确的类型，我想我最大的问题将是对其进行样式化，使其不会出现错误保存任何移动css样式。

<div data-role="collapsible" data-url="http://www.my-domain.com/jsonp.php">
    <h3>Click Me</h3>
    <p></p>
</div>

.ui-mobile .ui-page .ui-collapsible .ui-collapsible-content {
    padding-top    : 0;
    padding-bottom : 0;
}​