Question

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

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

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

});

Answer 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;
    }

}

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

1 个答案: