使用媒体查询来操作 jQuery 手风琴
using media queries to manipulate jquery accordion
你好,我在这个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;
}
不要启用和销毁您的手风琴。只需根据屏幕尺寸运行不同的功能即可。这对您来说将是最简单的解决方案,然后您不必在屏幕大小调整上运行函数。
相关文章:
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- Jquery未定义函数正在停止其他操作
- 如何动态操作jquery可拖动UL元素的内容
- 加载更多操作 jquery
- MVC - 在 ajax 调用中操作 Jquery 插件属性
- 使用媒体查询来操作 jQuery 手风琴
- 是否可以将一组类存储在内存中,以便我可以在页面上显示它们之前对它们执行操作?(JQuery)
- 正在操作JQuery.text()输出
- 单击操作 Jquery 不起作用
- 未定义ID/No操作Jquery
- 如何操作jquery-bootgrid格式化程序中的元素
- 操作 jQuery 使用输入创建的输入
- 使用哪种拖放操作?jQuery可拖放还是HTML5原生拖放?或者其他的
- 操作jQuery节点的文本值
- 使用底层客户端JSON数据连接、构建和操作JQuery UI
- 操作jquery集合
- 操作jQuery对象而不改变html元素
- 如果输入字段在数组中找到值,请执行此操作(jQuery/Javascript)