appendTo()忽略css媒体查询

时间:2014-08-02 04:02:23

标签: jquery css

我在jquery上创建这个函数,这个移动或在DOM上附加mi nav,将我的导航或位置的changue加载到另一个div

function nav () {
    if($(window).width() >= 768){
        if($('nav').length == 0) {
            $('#nav').load('ajax/menu.html nav')
        }
        else {
            $('nav').appendTo('#nav').css('display','block');
        }
    }
    else {
        if($('nav').length == 0 && $('#nav-mobil').length == 0){
            $('header').append('<div id="nav-mobil"></div>');
            $('#nav-mobil').load('ajax/menu.html nav');
            $('nav').css('display','none');
        }
        else if($('nav').length == 1 && $('#nav-mobil').length == 1){
            $('nav').appendTo('#nav-mobil').css('display','none');
        }
        else if ($('nav').length == 0) {
            $('#nav-mobil').load('ajax/menu.html nav');
            $('nav').css('display','none');
        }
        else if ($('#nav-mobil').length == 0) {
            $('header').append('<div id="nav-mobil"></div>');
            $('nav').appendTo('#nav-mobil').css('display','none');
        }
    }
}

$(document).on('ready', function(){nav();});

$(window).resize(function() {nav();});

CSS IGONRED:

nav {display:block}
@media only screen and (min-width: 320px) and (max-width: 767px) {
    nav {display:none;}
}

经过一些尝试终于可以加载或调整大小,但我的问题是:为什么我需要在脚本上添加css以在调整大小时显示或隐藏我的导航,如果我从我的脚本中删除css并在媒体上添加那些查询将被忽略

0 个答案:

没有答案