时间戳

首页 > 解决方案 > 使用 jQuery 创建移动菜单

javascript - 使用 jQuery 创建移动菜单

问题描述

我正在尝试使用 jQuery 创建移动菜单，但遇到以下问题：移动菜单仅根据我放置@媒体查询的宽度显示，当我单击其中一个导航链接时，它们会消失为他们应该。但是，如果我将窗口大小调整为全宽，导航栏将完全隐藏，我只能看到徽标。要再次显示导航菜单，我必须刷新页面。我该如何解决？

这是标题的 HTML

   <header>
        <div class="logo">
            <i class="fas fa-code fa-3x"></i> 
        </div>

        <div class="mobile-menu"><i class="fa fa-bars fa-2x"></i></div>

        <nav class="navbar">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

CSS for mobile-menuand media-query for both mobile-menuandnavbar

.mobile-menu {
    color: white;
    position: absolute;
    right: 20px;
    display: none;
}  
@media only screen and (max-width: 768px){

    .mobile-menu {
        display: block;
    }

    .navbar {
        display: none;
        flex-direction: column;
        background: var(--secondary);
        width: 11rem;
        position: absolute;
        right: 0;
        top: 60px;
    }
}

JS

$('.mobile-menu').on('click', function () {
    $('.navbar').slideToggle();
});

$('.navbar').click(function () {
    $(this).hide();
});

标签： javascripthtmljquerycss

解决方案

当您重新调整窗口大小时，导航菜单未显示的原因是您调用了 hide() 方法，该方法将内联（显示：无）css 样式添加到您的元素。为了防止这种情况，我建议您在导航栏中添加/删除额外的 css 类。
例如：

.hidden {
  display:none;
}

@media only screen and (max-width: 768px){
  .hidden {
    display:block; // Or whatever (flex, grid, etc.)
  }
}

或者：

在调整大小断点的导航栏中删除使用 show()。

$(window).resize(function () {
  var width = $(this).width()
  if (width > 768) {
    $(".navbar").show()
  }
})

推荐阅读