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

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

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

X图标和线堆栈图标也会反转。如何切换这些图标，并确保页面加载时关闭图标？我尝试在jQuery函数中切换icons类来切换x和line堆栈，但没有成功

我知道我遗漏了一个简单的概念，但我对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>

我的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');
    }

});

---

解决了这个问题，需要创建一个媒体查询来隐藏带display none；的.main导航；。通过这种方式，

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

/* 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;
    }

}

---

不幸的是，您可能没有提供足够的CSS来让其他人帮助回答这个问题。我假设错误是因为您隐藏了

.mobile nav icon

，而不是

.main nav

。也许你想用

.main导航

CSS选择器代替？您是否确认在

的CSS类中有
显示：无
。主导航
？如果这不是一个简单的疏忽，请更新您的问题，使其在一个文档中显示所有相关的代码。@obdimanage就是这样！我没有显示主导航：没有！我在一个小屏幕的媒体查询上做了这个，现在它工作得很好！非常感谢，没问题；很高兴你终于明白了：）
/* 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;
    }

}