Question

我写了一些JavaScript来制作一些带有“最近”类的div，隐藏其中包含的图像的4/5。单击时，这些div会在其上打一个额外的类，显示整个图像。这在桌面上工作正常，但在iOS上它表现得非常不稳定。当它发生但我在某些时候（当我滚动时？地址栏消失了？）时我不能完全确定下来.divs根本不会响应触摸，然后有时在旋转设备时会返回一些功能。不确定发生了什么。此外，这可能是一个完全不同的问题，但我认为它与上述问题有关，如果你在桌面上扩展浏览器，JavaScript似乎在768px宽之后“停用”（最近div的高度大于或小于比它们包含的图像。在窗口宽度为768px后，它们应该是相同的。）这是网站www.distantfuturejosh.com/playground/Pending%20Axioms，这里是必要的代码：

HTML

<div class="recent">
    <img src="img/comic_2.jpg">
</div>

CSS

.recent {
    width: 98%;
margin: 0% 0% 2% 2%;
float: left;
    position: relative;
    left: 0%;
    box-shadow: 0px 0px 20px -6px;
    overflow: hidden;
}
.recent img {
width: 100%;
}
.resize {
    height: auto !important;
}

的JavaScript

$(document).ready(function(){

    $(window).ready(phoneStyle);
    $(window).resize(phoneStyle);

    function phoneStyle()
    {
        if ($(window).width() <= 767) {

            // make the height of header and recent divs a percentage of window width
            $('div.recent, header').css('height', $(window).width() / 5);

            // make the recent divs show and hide (patially) when clicked
            $('div.recent').click(function() {
                $(this).toggleClass('resize');   // phone.css--> .resize {height: auto !important;}
            });
        } else {
            return;
        }
    }

});

Answer 1

我不确定这是否会导致问题，但.click 添加绑定到click事件而不是替换它{{1 }} 叫做。因此，如果phoneStyle被调用两次，那么phonestyle每次点击都会运行两次，可能导致没有任何事情发生..尝试将.toggleClass放在$('div.recent').unbind('click');之前，让我知道是否有帮助。

jQuery toggleClass适用于桌面，但不适用于iOS

1 个答案: