Question

我有一个响应式网站＆amp;想在移动版本上做一些slideToggle效果，让桌面网站保持完整显示的文字和图片。没有影响。我正在使用modernizr进行媒体查询，并且仅在窗口调整大小后刷新页面时才有效。当你只是调整大小时，这一切都变得疯狂了尽管如此，尝试与它互动。描述起来并不容易，所以请查看以下链接：

www.lastpixel.ie/new/test.php

调整浏览器大小 - ＆gt;刷新 - ＆gt;点击该项目 - ＆gt;完美无缺
调整浏览器大小 - ＆gt;点击该项目 - ＆gt;常量slideToggle

造成这种打嗝的原因是什么？

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();

});

Answer 1

您发布了嵌入页面的JS，但看起来您还包含main.js，它具有与您嵌入的JS相同的功能。我敢打赌，这与你的问题有关，但我不能自己测试。

浏览器调整大小+ slideToggle不能很好地协同工作

1 个答案: