隐藏在移动设备

时间:2015-09-10 02:10:51

标签: javascript jquery html css

我试图找出一旦网站加载到手机/智能手机上或者当我将浏览器调整到一个较小的窗口时我可以隐藏下拉菜单。我创建的下拉菜单立即显示,我必须触摸/单击菜单按钮才能隐藏它。

这是我创建的网站

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

1 个答案:

答案 0 :(得分:0)

您的CSS中有以下代码:

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

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