0

我编写了一些 JavaScript 来使一些具有“最近”类的 div 隐藏其中包含的图像的 4/5。单击时，这些 div 会得到一个额外的类，以显示整个图像。这在桌面上运行良好，但在 iOS 上表现非常不稳定。当它发生时我不能完全确定，但在某些时候（当我滚动时？当地址栏消失时？） div 根本不会响应触摸，然后有时当我旋转设备时某些功能会返回。不知道发生了什么。此外，这可能是一个完全不同的问题，但我认为它与上述问题有关，如果您在桌面上展开浏览器，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;
        }
    }

});
4

1 回答 1

1

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

于 2013-04-14T01:22:20.290 回答