在移动设备上隐藏下拉菜单答案

【问题标题】：Hide drop down menu on start on a mobile在移动设备上隐藏下拉菜单
【发布时间】：2015-09-10 02:10:50
【问题描述】：

我试图弄清楚一旦网站在手机/智能手机上加载或将浏览器调整为较小的窗口时如何隐藏下拉菜单。我创建的下拉菜单会立即显示，我必须触摸/单击菜单按钮才能隐藏它。

这是我创建的网站

http://digitalspin.ph/test/manosa/campanilla-homepage/

这是我创建的代码

HTML

a#pull{
    color: #FFF;
    font-family:'Open Sans';
    text-decoration: none;
    float: left;
    width: 54%;
    text-align: right;
    display: inline-block;
    line-height: 67px;
}

Javascript

$(document).ready(function(){
    $(function() {  
        var pull        = $('#pull');  
            menu        = $('#menu-primary-menu');  
            menuHeight  = menu.height();  

        $(pull).on('click', function(e) {  

            menu.slideToggle("");  
        });  
    });
}); 

$(document).ready(function(){
    $(window).resize(function(){  
        var w = $(window).outerWidth();  
        if(w > 400 && menu.is(':hidden')) {  
            menu.removeAttr('style');  
        }  
    });   
})


$(document).ready(function(){
    $(window).resize(function(){  
        var w = $(window).outerWidth();  
        if(w > 640 && menu.is(':hidden')) {  
            menu.removeAttr('style');  
        }  
    });   
})

【问题讨论】：

您指的是哪个下拉菜单？使用 Chrome 46 时，我最初看不到任何内容。
抱歉我忘了说要在手机上查看

标签： javascript jquery html css

【解决方案1】：

您可能需要考虑这种方法。

$(function(){
    $("#pull").click(function(){
        $("#menu-primary-menu").toggleClass("expanded");
    });
});

然后是一点 CSS 来完成这一切。

@media only screen and (max-width: 736px) {
   .menu {
        height: 0;
        overflow: hidden;
   }
   .menu.expanded {
        height: auto;
   }
}

我在这里使用 736 的媒体查询一直定位到 iphone 6 +

这种方法在手机浏览器上要轻得多，而且对于更旧的手机来说通常渲染速度更快。

【讨论】：

会试一试:)

【解决方案2】：

您的 CSS 中有以下代码：

@media only screen and (max-width: 380px) {
    header.secondary-navigation nav ul {
        float: none;
    }
}

您可以在float:none; 之后添加display:none;。

【讨论】：

这不是针对上面提到的 jQuery 的问题。