为什么移动导航按钮会在页面加载时展开？答案

【问题标题】：Why does mobile nav button expand on page load?为什么移动导航按钮会在页面加载时展开？
【发布时间】：2017-01-09 02:19:37
【问题描述】：

我有一个移动导航按钮，在触摸/单击时，它应该展开并显示页面链接。问题是当您第一次启动页面时，按钮已经展开：

但实际上应该加载隐藏元素的页面，如下所示：

X 图标和 Line-stack 图标也颠倒了。我将如何切换这些图标并确保页面在它们关闭时加载？我尝试在 jQuery 函数中切换图标类来切换 x 和 line-stack ，但这没有奏效。

我知道我缺少一个简单的概念，但我对 jQuery 很陌生，在这里遇到了麻烦。

我的 HTML：

                 <nav>
                    <div class="row">
                        <img src="img/logoblack.png" alt="logo" class="logo img-fluid">
                        <img src="img/logoblack.png" alt="logo" class="logo-black">
                        <ul class="main-nav js--main-nav">
                            <li><a href="#">About</a></li>
                            <li><a href="#">Skill</a></li>
                            <li><a href="#">Résumé</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                        <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
                    </div>
                </nav>

我的 CSS：

.mobile-nav-icon {
    float: right;
    margin-top: 30px;
    cursor: pointer; /* Used since no href tag specifying link type */
    display: none;
}

我的 jQuery：

$('.js--nav-icon').click(function() {
    var nav = $('.js--main-nav');
    var icon = $('.js--nav-icon i');

    nav.slideToggle(200);
    if (icon.hasClass('ion-navicon-round')) {
        icon.addClass('ion-close-round');
        icon.removeClass('ion-navicon-round');
    } else {
        icon.addClass('ion-navicon-round');
        icon.removeClass('ion-close-round');
    }

});

【问题讨论】：

很遗憾，您可能没有提供足够的 CSS 来让其他人帮助回答这个问题。我假设错误是因为您隐藏了.mobile-nav-icon 而不是.main-nav。也许您打算改用.main-nav CSS 选择器？您是否确认您在 .main-nav 的 CSS 类中有一个 display: none？如果这不是一个简单的疏忽，请更新您的问题，以便它在 minimal, complete, and verifiable example 中显示所有相关代码。
@ObsidianAge 就是这样！我没有显示 .main-nav：无！我在小宽度屏幕的媒体查询中做到了这一点，现在它完美无缺！非常感谢。
没问题；很高兴你最终弄明白了 :)

标签： javascript jquery html css jquery-mobile

【解决方案1】：

想通了，需要创建一个媒体查询，用 display-none; 隐藏 .main-nav。这样一来

标签在移动设备上被隐藏，但仍显示在浏览器的导航栏中：

/* Small phones to small tablets from: 481px to 767px*/
@media only screen and (max-width: 767px) {
    .main-nav {
        float: left;
        margin-top: 25px;
        margin-left: 25px;
        display: none;
    }

}

【讨论】：