移动导航在滚动时消失

mobile navigation disappears upon scrolling

本文关键字：消失 滚动 导航 移动      更新时间：2023-09-26

我正在尝试构建一个响应式网站，但在移动菜单方面遇到了一些困难。当我在移动设备上滚动页面时，菜单会消失。我希望它只通过点击标题（它有隐藏/显示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();
});
});

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

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

$(window).resize(function(){
    if ( width == GetWidth() ) {
      return;
    }
    width = GetWidth();
    if(width < 600){
      $('#mobile_active').hide();
    } else {
      $('#mobile_active').show();
    }
});

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

相关文章：