0

JavaScript を少し書いて、「recent」クラスの 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 追加します。したがって、phoneStyle が 2 回呼び出された場合、クリックがあるたびに 2 回実行され、何も起こらない可能性があります。phonestyle.toggleClass$('div.recent').unbind('click');$('div.recent').click(function() {

于 2013-04-14T01:22:20.290 に答える