我想使用可折叠 DIV 向用户显示和隐藏内容。
我发现这个 jQuery 代码来做展开和折叠： http ://webcloud.se/code/jQuery-Collapse/
然而，内容已经加载到 div 中（它只是从视图中隐藏）。
它将内容加载到打开的 div 中，但在关闭时也将其卸载！
然而，它都与 jQuery mobile 混合在一起，所以它的风格。我希望能够自己设置 div 的样式。第一个示例也使用漂亮的反弹或淡入淡出效果来显示内容。
这样做的原因是我想向用户显示不同的内容，例如图像或 Flash 文件，但我不希望在页面加载时将所有内容加载到页面中，这将是太多的东西。
那么我如何使用第一个 jQuery Collapse 示例但加载外部页面呢？
我喜欢这个问题，所以我花了一点时间做一些接近插件的东西：
//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 上使用它。
检查此链接它在 php 中，并显示如何加载到 DIV 的外部链接 Ajax 只能加载内部页面并且不能跨域工作。
这是我做的一个例子：
$(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>
}