0

小さなウィンドウ (レスポンシブ デザイン) にサイズ変更するときに、ボタン リンクを使用してメニューを切り替えます。

ボタンを使用してメニューを切り替えることができますが、ウィンドウのサイズを変更した後にメニューを元に戻すにはどうすればよいですか (例: タブレット/モバイルを横向きに傾けます)。

http://jsfiddle.net/uzDP2/6/ (ウィンドウをドラッグしてサイズを変更)

HTML:

<img class="mobileicon" src="http://i.imgur.com/M7AiJ0P.png" width="40" height="29" alt="Mobile icon" />
<div class="menuframe">
    <a class="menu" href="#">Home</a>
    <a class="menu" href="#">Products and Services</a>
    <a class="menu" href="#">Other Link</a>
    <a class="menu" href="#">Image Gallery</a>
    <a class="menu" href="#">Links</a>
    <a class="menu" href="#">Contact</a>
</div>
<div class="menuframe"></div>

CSS:

.mobileicon {
    display: none;
}
@media (max-width: 400px) {
    .mobileicon {
        display: block
    }    
    .menuframe {
        display: none;
    }
}

Javascript:

document.querySelector(".mobileicon").addEventListener("click", function(){
    $(".menuframe").toggle();
    });
4

3 に答える 3

1

次のことができます。

これを CSS に追加して、フレームの表示を再度追加します。

@media (min-width: 400px){

    .menuframe{
        display:block;    
    }

}

event-changed の jQuery リスナーを追加して、特定の幅で起動することもできます。

$(window).resize(function() {
    if($(window).width() > 400){
        $(".menuframe").show();        
    }
});

これで問題が解決するはずです。

于 2013-08-14T06:28:34.210 に答える
0

いくつかのチェックをしながらウィンドウのサイズ変更に取り組むことができると思います。

$(window).resize(function(){
    if(IwantToToggle){
        //toggle menu
    }
});
于 2013-08-14T06:30:01.843 に答える