Question

我正在努力让我的网站导航栏响应。我可以从桌面和平板电脑视图中查看所有内容，但是当菜单在移动视图中折叠时，单击它时它不会展开。下面是我的html，其中包括内联jQuery。

<script>
$(document).ready(function() {  
    var pull        = $('#pull');  
        menu        = $('nav ul');  
        menuHeight  = menu.height();  

    $(pull).on('click', function(e) {  
        e.preventDefault();  
        menu.slideToggle();  
    });  

$(window).resize(function(){  
    var w = $(window).width();  
    if(w > 320 && menu.is(':hidden')) {  
        menu.removeAttr('style');  
    }  
});

</script>
<nav class="clearfix">  
    <ul class="clearfix"; style="width:100%">  
                <li><a href="homepage.html">Home</a>
                </li>
                <li><a href="mobilestrategy.html">Mobile Strategy</a>

                </li>
                <li><a href="uiux.html">UI/UX</a>

                </li>
                <li><a href="development.html">Development</a>

                </li>
                <li><a href="qa.html">QA</a></li>
            </ul>
<a href="homepage.html" id="pull">Menu</a> 
</nav>

及以下是用于设置所有样式的CSS

nav {  
    height: 40px;  
    width: 99%;  
    background:#bbddff;  
    font-size: .8em;  
    font-family:Gills Sans Light, Arial, sans-serif;  
    position: relative;  
    border-bottom: 2px solid #283744;
    color: #121976 /*dark blue*/;
    text-decoration: none;
    -webkit-box-shadow: 5x 5px 5px #88ccff;
    -moz-box-shadow: 5px 5px 5px #88ccff;
    box-shadow: 5px 5px 5px #88ccff;
    border: 3px ridge #aaccff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}


nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 100%;
    height:50px;}


nav li {  
    display: inline;  
    float: left;  
}

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}

nav a {  
    color: #121976;  
    display: inline-block;  
    width: 100px;  
    text-align: center;  
    text-decoration: none;  
    line-height: 40px;  
    text-shadow: 1px 1px 0px #283744;  
}  

nav li a {  
    border-right: 3px ridge #aaccff;;  
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box;  
}  
nav li:last-child a {  
    border-right: 1 px solid #576979;  
}  
nav a:hover, nav a:active {  
    background-color: #121976;
    color:#bbddff;  
} 

nav a#pull {  
    display: none;  
}

/*Tablet styling*/

@media screen and (max-width: 600px) {  
    nav {   
        height: auto;  
    }  
    nav ul {  
        width: 100%;  
        display: block;  
        height: auto;  
    }  
    nav li {  
        width: 50%;  
        float: left;  
        position: relative;  
    }  
    nav li a {   
        border-right: 1px solid #576979;  
    }  
    nav a {  
        text-align: left;  
        width: 100%;  
        text-indent: 25px;  
    }  
} 
/*small tablet*/
@media only screen and (max-width : 480px) {  
    nav {  
        border-bottom: 0;  
    }  
    nav ul {  
        display: none;  
        height: auto;  
    }  
    nav a#pull {  
        display: block;  
        background-color: #bbddff;
        color:#121976;
        width: 100%;  
        position: relative;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    }  
    nav a#pull:after {  
        content:"";  
        /*background: url('nav-icon.png') no-repeat;*/  
        width: 30px;  
        height: 30px;  
        display: inline-block;  
        position: absolute;  
        right: 15px;  
        top: 10px;
    }  
}  

/*Mobile view*/
@media only screen and (max-width : 320px) {  
    nav li {  
        display: block;  
        float: none;  
        width: 100%;  
    }  
    nav li a {  
        border-bottom: 1px solid #576979;  
    }  
}

我的jQuery代码是否有问题导致导航栏无法在移动视图中工作？

Answer 1

您没有关闭$(document).ready(

jsFiddle joy

$(document).ready(function() {  
    var pull        = $('#pull');   
    var menu        = $('nav ul'); // don't miss the var
    var menuHeight  = menu.height();  // don't miss the var

    $(pull).on('click', function(e) {  
        e.preventDefault();  
        menu.slideToggle();  
    });  

    $(window).resize(function(){  
        var w = $(window).width();  
        if(w > 320 && menu.is(':hidden')) {  
            menu.removeAttr('style');  
        }  
    });
}); // close

Answer 2

你没有关闭就绪功能，试试这个

$(document).ready(function() {  
    var pull        = $('#pull');  
        menu        = $('nav ul');  
        menuHeight  = menu.height(); 
alert(pull.width());        

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

        e.preventDefault();  
        menu.slideToggle();  
    });  
});
$(window).resize(function(){  
    var w = $(window).width();  
    if(w > 320 && menu.is(':hidden')) {  
        menu.removeAttr('style');  
    }  
});

带有jQuery的响应式导航栏

2 个答案: