使用.toggle后如何恢復菜單？

Question

當我調整到較小的窗口（響應式設計）時，按鈕鏈接用於.toggle菜單。

我可以使用按鈕來切換菜單但是如何在調整到更大的窗口后讓菜單返回（例如：我將平板電腦/手機傾斜到橫向）？

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();
    });

Answer 1

因為.toggle()會向元素添加內聯css，並且會覆蓋類的css。 我建議你使用.toggleClass()來解決這個問題。

http://jsfiddle.net/b_m_h/uzDP2/9/

jQuery的：

document.querySelector(".mobileicon").addEventListener("click", function(){
    $(".menuframe").toggleClass('visible');
});

CSS：

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

Answer 2

您可以執行以下操作：

將其添加到CSS中以再次為您的框架添加顯示：

@media (min-width: 400px){

    .menuframe{
        display:block;    
    }

}

您還可以為事件更改添加jQuery偵聽器，以觸發特定寬度：

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

這應該可以解決您的問題。

Answer 3

我認為你可以在窗口調整大小一些檢查。

$(window).resize(function(){
    if(IwantToToggle){
        //toggle menu
    }
});