Jquery slideToggle "bounces" 多次调整大小
Jquery slideToggle "bounces" multiple times on resize
我对一个简单的 jQuery 脚本有点问题(我不是专家):
我的要求:
1) 我有多个元素由
- 一个标题
- 一个 body
2) 对于大于 768px 的屏幕,所有元素都是可见的
3) 对于屏幕尺寸 =< 768px 我想模拟 Bootstrap 折叠行为,所以当您单击标题时,元素的 "body",即 <div class="panel--collapsible" id="panel1">
变得可见。默认情况下,元素的 body 开头不可见。
我post这里是我目前写的代码
$(document).ready(function() {
toggleDivOnMobile();
window.addEventListener('resize', function() {
toggleDivOnMobile();
});
});
function toggleDivOnMobile() {
$('.par-title--collapsible').click(function(e) {
e.preventDefault();
var currentAttrValue = $(this).attr('href');
var content = $(currentAttrValue);
if (window.outerWidth <= 768) {
content.slideToggle("slow");
}
});
return false;
}
.panel--collapsible {
display: none;
}
@media screen and (min-width:769px) {
.panel--collapsible {
display: block!important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="par1" class="collapsible">
<h2><a href="#panel1" class="par-title--collapsible">Title 1</a></h2>
<div class="panel--collapsible" id="panel1">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div id="par2" class="collapsible">
<h2><a href="#panel2" class="par-title--collapsible">Title 2</a></h2>
<div class="panel--collapsible" id="panel2">
<p>Cuius et cetera</p>
</div>
</div>
我的问题是:调整 window 大小后,折叠有效,但它 "bounces" 多次。
您可以通过调整 window 的大小来模拟行为。
感谢您的帮助;当然,如果您需要更多信息,请给我留言:)
问题是您正在调用 toggleDivOnMobile
,每次 window 调整大小时都会调用它。通过将您的事件处理程序附加到该函数内部,您最终会得到多个事件处理程序都试图做同样的事情,并且他们开始互相争斗。
解决方案是设置一些外部变量并只附加一次事件侦听器,如下所示:
var isMobile = false;
$(document).ready(function() {
toggleDivOnMobile();
handleWindowResize();
window.addEventListener('resize', function() {
handleWindowResize();
});
});
function handleWindowResize() {
isMobile = window.outerWidth <= 768;
}
function toggleDivOnMobile() {
$('.par-title--collapsible').click(function(e) {
e.preventDefault();
var currentAttrValue = $(this).attr('href');
var content = $(currentAttrValue);
if (isMobile) {
content.slideToggle("slow");
}
});
return false;
}
还有许多其他方法可以完成此操作,但这只是一个开始。如果您想根据 window 大小动态添加和删除事件侦听器,您还可以查看 jQuery .off
函数,但我不建议这样做。
编辑
您可能还想将 isMobile
检查放在一个外部函数中,并在页面加载时调用它;除非浏览器实际调整大小,否则移动浏览器(或任何浏览器,实际上)不会触发调整大小事件。
编辑 2
更新了每个 OP 请求的代码以包含 onload resize 调用。
我对一个简单的 jQuery 脚本有点问题(我不是专家):
我的要求:
1) 我有多个元素由 - 一个标题 - 一个 body
2) 对于大于 768px 的屏幕,所有元素都是可见的
3) 对于屏幕尺寸 =< 768px 我想模拟 Bootstrap 折叠行为,所以当您单击标题时,元素的 "body",即 <div class="panel--collapsible" id="panel1">
变得可见。默认情况下,元素的 body 开头不可见。
我post这里是我目前写的代码
$(document).ready(function() {
toggleDivOnMobile();
window.addEventListener('resize', function() {
toggleDivOnMobile();
});
});
function toggleDivOnMobile() {
$('.par-title--collapsible').click(function(e) {
e.preventDefault();
var currentAttrValue = $(this).attr('href');
var content = $(currentAttrValue);
if (window.outerWidth <= 768) {
content.slideToggle("slow");
}
});
return false;
}
.panel--collapsible {
display: none;
}
@media screen and (min-width:769px) {
.panel--collapsible {
display: block!important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="par1" class="collapsible">
<h2><a href="#panel1" class="par-title--collapsible">Title 1</a></h2>
<div class="panel--collapsible" id="panel1">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div id="par2" class="collapsible">
<h2><a href="#panel2" class="par-title--collapsible">Title 2</a></h2>
<div class="panel--collapsible" id="panel2">
<p>Cuius et cetera</p>
</div>
</div>
我的问题是:调整 window 大小后,折叠有效,但它 "bounces" 多次。
您可以通过调整 window 的大小来模拟行为。
感谢您的帮助;当然,如果您需要更多信息,请给我留言:)
问题是您正在调用 toggleDivOnMobile
,每次 window 调整大小时都会调用它。通过将您的事件处理程序附加到该函数内部,您最终会得到多个事件处理程序都试图做同样的事情,并且他们开始互相争斗。
解决方案是设置一些外部变量并只附加一次事件侦听器,如下所示:
var isMobile = false;
$(document).ready(function() {
toggleDivOnMobile();
handleWindowResize();
window.addEventListener('resize', function() {
handleWindowResize();
});
});
function handleWindowResize() {
isMobile = window.outerWidth <= 768;
}
function toggleDivOnMobile() {
$('.par-title--collapsible').click(function(e) {
e.preventDefault();
var currentAttrValue = $(this).attr('href');
var content = $(currentAttrValue);
if (isMobile) {
content.slideToggle("slow");
}
});
return false;
}
还有许多其他方法可以完成此操作,但这只是一个开始。如果您想根据 window 大小动态添加和删除事件侦听器,您还可以查看 jQuery .off
函数,但我不建议这样做。
编辑
您可能还想将 isMobile
检查放在一个外部函数中,并在页面加载时调用它;除非浏览器实际调整大小,否则移动浏览器(或任何浏览器,实际上)不会触发调整大小事件。
编辑 2
更新了每个 OP 请求的代码以包含 onload resize 调用。