浏览器resize+ slideToggle不能很好地协同工作
我有一个响应式网站，并希望在移动版本上执行一些slideToggle效果，使桌面网站保持完整显示的文本，没有任何效果。 我正在使用modernizr进行媒体查询，只有在调整窗口大小后刷新页面时它才有效。 不过，当你只是resize并尝试与之互动时，这一切都会变得疯狂。 描述起来并不容易，所以请查看以下链接：
www.lastpixel.ie/new/test.php
- 调整浏览器大小 – >刷新 – >点击项目 – >工作完美
- 调整浏览器大小 – >单击项目 – >常量slideToggle
造成这种打嗝的原因是什么？
HTML：
Item 1
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.
Item 2
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.
Item 3
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.
Item 4
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.
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(); });
您发布了嵌入页面的JS，但看起来您还包含main.js，它具有与您嵌入的JS相同的function。 我敢打赌，这与你的问题有关，但我不能自己测试。