javascript - 移动导航在滚动时消失

Question

我正在尝试构建响应式网站，但在移动菜单方面遇到一些困难。当我在移动设备上滚动页面时，菜单消失。我希望它只能通过单击标题(具有隐藏/显示 jquery 代码)来控制。我还遇到了子菜单下拉菜单的问题 - 它们覆盖了我的主要类别 - 如果有人对这个问题有任何建议或资源，我将不胜感激。谢谢。

源代码

<header><a class="mobile_menu"></a></header>

<nav>
    <ul id="mobile_active">
        <li><a href="#">Home</a></li>
        <li><a href="#">Corporate Profile</a>
            <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">News, Updates & Articles</a></li>
                <li><a href="#">Partners</a></li>
            </ul>
        </li>
        <li><a href="#">Our Technology</a>
            <ul>
                <li><a href="#">Clean Energy Overview</a></li>
                <li><a href="#">Statistics</a></li>
            </ul>
        </li>
        <li><a href="#">Photo Gallery</a>
            <ul>
                <li><a href="#">Video</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a>
            <ul>
                <li><a href="#">Location</a></li>
                <li><a href="#">Social Media</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

#mobile_active { 
display:none;
padding:0;
margin:0;}

a.mobile_menu {
display:block;
width:100%;
height:35px;
background:#395f96 
url(../links/mobile_link_menu.png)no-repeat 4px 4px;
position:absolute;
top:0px;
cursor:pointer;}

a.mobile_menu.selected {
background-position: 4px -26px;}
#mobile_active li a {
padding-top:0.5em;}

#mobile_active ul li a {
padding:0.5;    
line-height:2em;}

nav {
width:100%;
height:auto;    
position:relative;}

nav ul { 
list-style:none;
display:block;
margin:0 auto;}

nav ul li {
width:100%;
margin:0;
padding:0;
position:relative;
background-color:#FFF;}

nav ul li a {
color: #353433;
font-size:1em;
text-align:center;
border-bottom: 1px solid #CCC;
display:block;
padding:3%;
width:94%;
margin:0;}

nav ul ul {
position:absolute;
visibility:hidden;
display:none;
background-color:#FFF;
border: 0px solid #CCC;
width:100%;}

nav ul li a:hover { 
color: #395f96;
background-color:#e4ecf7;}

nav ul ul li:hover {
background: #e4ecf7;
width:100%;}

#mobile_active li ul li a {
display:none;}

Jquery

var screensize = document.documentElement.clientWidth;
$(document).ready(function(){

var resizeTimer;
$(window).on('resize', function (e) {
clearTimeout(resizeTimer);

resizeTimer = setTimeout(function () {
    if ($(window).width() >= 600) {
        $('#mobile_active').show();
    } else {
        $('#mobile_active').hide(); }
}, 50);
});

$('header').on('click touch', function() {
$('#mobile_active').slideToggle(500);
e.preventDefault();
});

$('#mobile_active li a').on('click touch',function() {
$( '#mobile_active li ul li a' ).slideToggle(150);
e.preventDefault();

});
});

Answer 1

所以，我想我已经找到了解决方案!

当用户滚动时，$(window).resize 函数被调用。如果宽度没有改变，您可以忽略调整大小事件，它将解决您的问题。

$(window).resize(function(){

    if ( width == GetWidth() ) {
      return;
    }

    width = GetWidth();

    if(width < 600){
      $('#mobile_active').hide();
    } else {
      $('#mobile_active').show();
    }

});

当然，真正的功劳要归功于此网站上用户名为 chili434 的旧帖子，非常感谢!