带有CSS媒体查询的jQuery .slideToggle() [英] Jquery .slideToggle() with CSS media query

问题描述

我有一个网站的移动版本，该版本随宽度而变化，当移动宽度触发媒体查询时，菜单会变为下拉菜单.我遇到的问题是，当用户单击下拉列表然后再次将其隐藏时，将宽度扩展到完整视图时，菜单仍然处于隐藏状态.

I have a mobile version of my website that changes according to the width, when the mobile width triggers the media query changes the menu to a drop down. The problem I am having is when a user click on the drop down and then hides it again, when expanding width to full view the menu remains hidden.

jQuery:

$(document).ready(function(){
$("#drop_button")
    .click(function(){
        $("#menu").stop();
        $("#menu").slideToggle();
    });
});

CSS:

#menu {
    width:30%;  
    float:left;
}

@media (max-device-width: 380px), (max-width: 380px){
    #menu{
        display:none;
        width:calc(100% - 20px);
        height:auto;
        padding:10px;
        font-size:1em;
    }
}

任何帮助将不胜感激.

推荐答案

希望在CSS中做到这一点，但是我使用了Jquery:

Was hoping to this in CSS however I have used Jquery:

    $( window ).resize(function() {
        if ($(window).width() > 380){
            $("#menu").css("display","inline");
            //Ensure menu is always visible if the window width is larger than 380px.
        }
        else
        {
            $("#menu").css("display","none");
            //Hide the menu any time the window is resized.
        }
    });

这篇关于带有CSS媒体查询的jQuery .slideToggle()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！