你好,我在这个jQuery手风琴上遇到了困难。我想使用移动平台的jQuery手风琴显示内容,并在更大的屏幕尺寸上销毁手风琴。除了两个问题外,一切正常。
-
仅当调整文档窗口的大小时,折叠项才会销毁,在加载文档时不会销毁。
一旦手风琴 被破坏,当我将文档窗口调整为移动大小时,我无法使手风琴再次工作。
下面是一些代码:
<div class="content-wrap">
<div class="container">
<div class="row">
<div class="content-fill">
<div class="content">
<div class="testimonials col-md-6 col-lg-6">
<h1>section 1</h1>
<p>this is a paragraph</p>
</div>
<div class="social col-sm-6 col-md-3 col-lg-3">
<h1>section 2</h1>
<div class="social-wrap">
<a class="twitter-timeline" width="100%" data-chrome="transparent noscrollbar" href="https://twitter.com/xxxxxx" data-widget-id="383311602641952769">Tweets by @xxxxxx</a>
</div>
</div>
<div class="news col-sm-6 col-md-3 col-lg-3">
<h1>section 3</h1>
<p>this is a paragraph</p>
</div>
</div>
</div>
</div>
</div>
</div>
// <![CDATA[
var $ = jQuery.noConflict(); $(document).ready(function()
{
$('.content').addClass('accordion');
$(window).resize(function() {
if ($('.social').css('float') == 'left') {
$('.content').accordion('destroy');
} else if($('.social').css('float') == 'none') {
$('.content').accordion('enable');
}
});
$(".accordion").accordion({
collapsible: true,
header: "h1",
heightStyle: "fill",
});
//getter variables
var collapsible = $(".accordion").accordion("option","collapsible");
var header = $(".accordion").accordion("option","header");
var heightStyle = $(".accordion").accordion("option","heightStyle");
$('.carousel').carousel({ interval: 4000, cycle: true });
}); // ]]>
将destroy
替换为disable
并将处理程序也添加到load
事件中:
function accordionSwitch() {
if ($('.social').css('float') == 'left') {
$('.content').accordion('disable');
} else if($('.social').css('float') == 'none') {
$('.content').accordion('enable');
}
}
$(window).on('resize load', accordionSwitch);
手风琴文件说destroy
方法
完全删除了折叠面板功能。这会将元素返回到其初始化前的状态。
那么为什么不使用媒体查询在大屏幕上隐藏手风琴并在"小"屏幕上显示呢?
@media (max-width: 797px) {
. accordion {
display: block;
}
}
您的默认样式是
.accordion {
display: none;
}
不要启用和销毁您的手风琴。只需根据屏幕尺寸运行不同的功能即可。这对您来说将是最简单的解决方案,然后您不必在屏幕大小调整上运行函数。