浏览器调整大小+ slideToggle不能在一起很好地工作 [英] Browser resize + slideToggle not working well together
问题描述
我有一个响应网站&想要在移动版本上做一些slideToggle效果，保持桌面网站具有完全显示的文本&没有效果。我使用modernizr作为我的媒体查询，它只有在窗口调整大小后刷新页面时才起作用。当你只是调整大小和amp;尝试与它互动，虽然。这不容易描述，所以请查看下面的链接：
- 调整浏览器大小 - >刷新 - >点击
HTML：
< div class =item>
< div class =item-title>
< h2 class =subtitle>项目1< / h2>
< div class =icn>< / div>
< div class =clear>< / div>
< / div>
< p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准的虚拟文本，自从1500年代，当一个未知的打印机采取类型的厨房，并加扰它，以制作一个类型的标本书。< / p>
< / div>
< div class =item>
< div class =item-title>
< h2 class =subtitle>项目2< / h2>
< div class =icn>< / div>
< div class =clear>< / div>
< / div>
< p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准的虚拟文本，自从1500年代，当一个未知的打印机采取类型的厨房，并加扰它，以制作一个类型的标本书。< / p>
< / div>
< div class =item>
< div class =item-title>
< h2 class =subtitle>项目3< / h2>
< div class =icn>< / div>
< div class =clear>< / div>
< / div>
< p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准的虚拟文本，自从1500年代，当一个未知的打印机采取类型的厨房，并加扰它，以制作一个类型的标本书。< / p>
< / div>
< div class =item>
< div class =item-title>
< h2 class =subtitle>项目4< / h2>
< div class =icn>< / div>
< div class =clear>< / div>
< / div>
< p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准的虚拟文本，自从15世纪以来，当一个未知的打印机采取类型的厨房，并加扰它制作一个类型的标本书。< / p>
< / div>
JS：
$（document）.ready（function（）{
function doneResizing（）{
if（Modernizr.mq ：870px）'））{
$（'。item-title'）click（function（el）{
$（this）.next（）。slideToggle （）;
$（this）.toggleState（function（el）{
el.animate（{
backgroundColor：＃333，
'color'：#fff
}，500）;
}，function（el）{
el.animate（{
backgroundColor：＃ e7e7e7，
'color'：＃000
}，500）;
}）;
}）;
}
}
var id;
$（window）.resize（function（）{
clearTimeout（id）;
id = setTimeout（doneResizing，0）;
}）;
doneResizing（）;
}）;
也看起来像你有main.js包含一些与您嵌入的JS相同的功能。我的打赌是，这与你的问题有关，但我不能自己测试。
I have a responsive site & would like to do some slideToggle effects on a mobile version, keeping the desktop site with fully shown text & no effects. I'm using modernizr for my media queries, and it works only when you refresh the page after the window has been resized. It all goes bonkers when you just resize & try to interact with it, though. It's not easy to describe, so please check below link:
- resize browser -> refresh -> click on the item -> works perfect
- resize browser -> click on the item -> constant slideToggle
What is causing such a hiccup?
HTML:
<div class="item">
<div class="item-title">
<h2 class="subtitle">Item 1</h2>
<div class="icn"></div>
<div class="clear"></div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="item">
<div class="item-title">
<h2 class="subtitle">Item 2</h2>
<div class="icn"></div>
<div class="clear"></div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="item">
<div class="item-title">
<h2 class="subtitle">Item 3</h2>
<div class="icn"></div>
<div class="clear"></div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="item">
<div class="item-title">
<h2 class="subtitle">Item 4</h2>
<div class="icn"></div>
<div class="clear"></div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
JS:
$(document).ready(function() {
function doneResizing() {
if(Modernizr.mq('screen and (max-width: 870px)')) {
$('.item-title').click(function (el) {
$(this).next().slideToggle();
$(this).toggleState(function (el) {
el.animate({
backgroundColor: "#333",
'color': "#fff"
}, 500);
}, function (el) {
el.animate({
backgroundColor: "#e7e7e7",
'color': "#000"
}, 500);
});
});
}
}
var id;
$(window).resize(function() {
clearTimeout(id);
id = setTimeout(doneResizing, 0);
});
doneResizing();
});
You posted the JS you embedded in the page but it also looks like you have main.js included which has some of the same functionality as the JS you embedded. My bet is that this has something to do with your problem, but I can't test it myself.
这篇关于浏览器调整大小+ slideToggle不能在一起很好地工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
