1

ブラウザの幅が小さくなったときに特定の要素を非表示にするために、この JavaScript を Web サイトに適用しました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(window).bind("resize", function() {
            $('#slideshow').toggle($(this).width() >= 960);  
        }).trigger("resize");
    });
</script>

ただし、モバイル ブラウザーでは、要素を削除する前にすばやく表示します。これを解決する方法を知っている人はいますか？

4

2 に答える 2

1

ドキュメントの準備が整うまで、コードは実行されません。document.readyつまり、jQuery でメソッドが起動されるまで、エレメントが短時間表示されます。コードを取得して要素を非表示にし、要素の直後に配置して、document.readyラッパーから削除することができます。

<div id="slideshow"></div>
<script>
    $('#slideshow').toggle( $(window).width() >= 960 );
</script>

または、デフォルトで要素を非表示にし、適切な条件が満たされたときに JavaScript で表示することもできます。

<style>#slideshow { display: none }</style>

<div id="slideshow"></div>

<script>
    $('#slideshow').toggle( $(window).width() <= 960 );
</script>
于 2012-05-26T22:39:23.827 に答える
0

このためにTwitterのブートストラップソリューションを試しましたか? http://twitter.github.com/bootstrap/scaffolding.html

于 2012-05-26T22:40:29.120 に答える