Question

我想使用可折叠DIV来显示和隐藏用户的内容。

我发现这个jQuery代码可以进行扩展和折叠： http://webcloud.se/code/jQuery-Collapse/

但是内容已经加载到div中（它只是从视图中隐藏）。

所以我发现了这个： http://www.raymondcamden.com/index.cfm/2011/4/5/Collapsible-content-and-Ajax-loading-with-jQuery-Mobile

将内容加载到开场div中，但在关闭时也将其卸载！

然而它全部混合了jQuery mobile，所以它的风格。我希望能够自己设计div。第一个例子也使用漂亮的反弹或淡入淡出效果来将内容带入视图。

这样做的原因是我想向用户展示不同的内容，例如图片或flash文件，但我不想在页面加载时将所有内容加载到页面中，这将是太多的东西。

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

Answer 1

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

//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;
});

可折叠HTML看起来像这样：

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

以下是演示：http://jsfiddle.net/YQ43B/6/

请注意，对于演示，我发现使初始动画流畅的最佳方法是添加此CSS：

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

对于顶部和底部填充，jQuery Mobile添加的默认填充为10px，我将这些值作为数据属性添加到每个窗口小部件以维护默认值。

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

Answer 2

这是我做的一个例子：

         $(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>
      }

Answer 3

在php中查看此link并显示如何加载外部链接到DIV Ajax只能加载内部页面，并且不能跨域工作。

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

3 个答案: