你好,我在使用这个 jQuery Accordion 时遇到了困难。我想使用移动平台的 jQuery Accordion 显示内容,并在更大的屏幕尺寸上破坏 Accordion 。除两个问题外,一切正常。
Accordion 只有在调整文档窗口大小时才会被销毁,而不会在文档加载时被销毁。
Accordion 损坏后,当我将文档窗口调整为移动尺寸时, Accordion 无法再次工作。
这是一些代码:
<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);
Accordion documentation说 destroy
方法
removes the accordion functionality completely. This will return the element back to its pre-init state.
关于javascript - 使用媒体查询来操纵 jquery Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19368409/