个人中心
gpt4 book ai didi

javascript - 即使在浏览器调整大小后响应菜单也不会关闭

转载 作者：太空宇宙 更新时间：2023-11-04 12:22:01 25 4
gpt4 key购买 nike

这是我的代码:HTML:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Responsive Menu</title>
    <link rel="stylesheet" href="css/colors.css"/>
    <link rel="stylesheet" href="css/font-awesome.css"/>
</head>
<body>
<header id="topbar">
    <p>Some title</p>

    <nav class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact Me</a></li>
        </ul>
    </nav>

    <div class="nav-trigger">
        <span><i class="fa fa-bars fa-2x"></i></span>
    </div>

    <nav class="mobile-menu-enabler">
        <span></span>
    </nav>
</header>

<nav class="mobile-menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>


<!-- Begin main sample site content -->
<div id="wrapper">
    <p>Lorem ipsum dolor set amet...</p>
</div>


<script src="js/jquery-2.1.3.js"></script>
<script src="js/script.js"></script>
</body>
</html>

CSS:

body {
    font-family: "Ludica Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}

p {
    margin: 0;
    padding: 0;
    display: inline-block;
}

header {
    margin: 0;
    padding: 0;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: azure;
    border: 1px solid black;
    width: 100%;
}

/* Begin Menu Code */
.menu {
    display: inline-block;
    float: right;
}

.menu ul {
    list-style: none;
    margin: 5px 0;
}

.menu ul:last-child {
    margin-right: 10px;
}

.menu ul li {
    display: inline-block;
    margin: 0 2px;
    padding: 0;
    border: 1px solid black;
}

.menu ul li a {
    text-decoration: none;
    color: black;
    padding: 3px;
}

.menu ul li>:hover {
    background-color:black;
    color: white;
}
/* End Menu Code */

/* Mobile Menu Begin */
.mobile-menu-enabler {
    display: none;
    background-color: aqua;
}

.mobile-menu {
    display: none;
    position: relative;
    top: 38px;
    width: 100%;
    border-top: 1px solid black;
}

.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu ul li {
    margin: 0;
    padding: 0;
    border: 1px solid black;
    border-top: 1px solid transparent;
    text-align: center;
}

.mobile-menu ul li a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: black;
}

.mobile-menu ul li:hover {
    background-color: darkkhaki;
}
/* Mobile Menu End */

/* Mobile Trigger Button */
.nav-trigger {
    display: none;
    text-transform: uppercase;
    color: black;
    background-color: transparent;
    margin-right: 10px;
    padding: 0;
    text-align: center;
}

.nav-trigger:hover {
    color: red;
    background-color: transparent;
}
/* End Mobile Trigger Button */


/* Dummy wrapper stuff */
#wrapper {
    clear: both;
    display: inline-block;
    position: relative;
}
/* End Dummy wrapper stuff */

@media screen and (max-width: 900px) {
    .menu {
        display: none;
    }

    .mobile-menu-enabler {
        display: block;
    }

    .nav-trigger {
        display: inline-block;
        float: right;
    }

    /*.mobile-menu {*/
        /*display: block;*/
    /*}*/
}

JavaScript:

$(document).ready(function(){ // Begin document ready function
    var headerHeight = $("#topbar").height();

    $(".nav-trigger").click(function() {
        $(".mobile-menu").slideToggle(400)
    });

    $(".mobile-menu").css("top", headerHeight);

    $("#wrapper").css("top", headerHeight);
}); // End document ready function

当页面加载时，我有一个顶部标题栏，其中包含虚拟链接。当浏览器宽度缩小到 900px 的断点以下时，响应式菜单会启动，此时单击“3 条形图标”后，下拉菜单会按预期显示。

但是，如果我在没有先关闭下拉菜单的情况下将屏幕大小调整回完整大小，即使在浏览器完全展开后它仍会继续保留。

如何让下拉菜单在宽度超过 900px 的断点时自动“取消切换”？

谢谢

编辑:截图: First image

Second image

Third image

Fourth image

这是我希望它的行为方式: callmenick.com/lab-demos/10-simple-responsive-navigation移动端导航完全展开后，浏览器窗口展开后自动向上滑动

最佳答案

由于您在单击该菜单栏图标时使用 Javascript 来切换显示，因此它在某种程度上几乎使 .mobile-menu 的“显示”css 无效(因为它在 css 已经加载)。因此，您需要切换 UL 显示值(子项)，而不是 .mobile-menu(父项)。这样，响应式 .mobile-menu css 就会保持原样……我相信这就是您提到的示例网站所做的。

<nav class="mobile-menu">
    <ul class="mobile-menu-items">
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>

将 .mobile-menu 的 css 保留为 display: none 在大屏幕上， display:block 用于小屏幕。然后对于新类“.mobile-menu-items”，您最初可以将其设置为显示:无，然后使用您的 jQuery 进行切换:

$('.nav-trigger').click(function(){
    $('.mobile-menu-items').slideToggle();
});

或者，您可以切换可见性而不是显示。

$('.nav-trigger').click(function(){
  if ( $('.mobile-menu').css('visibility') == 'hidden' )
    $('.mobile-menu').css('visibility','visible');
  else
    $('.mobile-menu').css('visibility','hidden');
});

关于javascript - 即使在浏览器调整大小后响应菜单也不会关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28301561/

25 4 0
文章推荐： c# - C++ zlib 膨胀失败 - C# 修复的翻译？
文章推荐： linux - 从网络服务器调用时，python 子进程命令未成功执行
文章推荐： c++ - MFC 调整大小对话框和子窗口绘制问题
文章推荐： c - libcjson.so : cannot open shared object file: No such file or directory
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com