0

私は単純なcssエフェクトまたはjsになりますが、まだ解決策が見つかりません。

ブラウザウィンドウまたは親divのサイズを変更すると、これ自体が非表示に設定され、同じメニューを水平方向に含む別のdivを表示として設定する必要があるdiv内にメニューを作成するという私のターゲット。

<div id="when_size_if_of_100px_visible_if_not_hidden">[menu item1 item2 item 3 item4]</div>

<div id="when_size_sup_of_100px_visible_if_not_hidden">
 menu  
 item1
 item2
 item3
</div>

はっきりしたいと思います。すべての応答に感謝します。

4

3 に答える 3

1

メディア クエリを使用して、ブラウザ ウィンドウのサイズに応じて異なる CSS を記述できます。

于 2012-04-21T14:04:51.527 に答える
1

newtron が言ったように、これを行うにはメディア クエリを使用する必要があります。コンテンツは 1 つしかありませんが、ウィンドウ サイズに基づいて異なる方法で表示されます。これが実際の例ですhttp://jsfiddle.net/pomeh/Gdve3/

使用するHTMLコードは

<ul>
    <li>menu A</li>
    <li>menu B</li>
    <li>menu C</li>
    <li>menu D</li>
</ul>

<div>
    Window width is lower than 500px !
</div>

そしてCSSコード

li {
    border: solid black 1px;
    width: 100px;
    display: inline-block;
}

div {
    display: none;
}


@media (max-width:500px) {
    li {
        display: block;
    }
    div {
        display: block;
    }
}​

また、IE ではメディア クエリがサポートされていないことにも注意してください。この目的のために、Respond.js Javascript ライブラリhttps://github.com/scottjehl/Respondを使用できます。

于 2012-04-21T14:22:28.577 に答える
0

使用できますresize：

$(window).resize(function(){
  if (window.innerWidth < 100){
    $("#when_size_if_of_100px_visible_if_not_hidden").hide();
    $("#when_size_sup_of_100px_visible_if_not_hidden").show();
  } else {
    $("#when_size_if_of_100px_visible_if_not_hidden").show();
    $("#when_size_sup_of_100px_visible_if_not_hidden").hide();
  }
});
于 2012-04-21T14:05:02.153 に答える