导航栏消失在手机屏幕宽度以下

Question

我创建了一个响应式导航栏，但问题就在这里，当我进入移动宽度并打开和关闭导航栏，然后我调整到正常宽度时，导航栏不再存在，我必须刷新才能使它再次出现。我使用 jQuery 来切换一个在 display:block 和 display:none 之间动画的类，当我打开和关闭导航栏时，我将其调整为全宽，我认为它仍然是 display:none。我怎样才能解决这个问题 ？

代码如下：

HTML：

    <header>                             
        <div class="menu-trigger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
        <nav id="index-nav">
            <ul>
                <li><a id="active" href="index.html">HOME</a></li>
                <li><a href="collection.html">COLLEZIONI</a></li>
                <li><a href="events.html">EVENTI</a></li>
                <li><a href="contact.php">CONTATTACI</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="colaborations.html">COLLABORAZIONI</a></li>
            </ul>
        </nav>
    </header>

CSS：

#index-nav{
    background-color: rgba(0, 0, 0, 0.2);
    width:100%;
    text-align:center;
    position:absolute;
    display:block;
}

#index-nav ul {
    margin:0;
    font-size:13px;
    font-style:italic;
    overflow: hidden; 
}

#index-nav ul li{
    list-style:none;
    display:inline-flex;
    padding:10px 4%;   
}

@media (max-width:980px) {

        .showing {
            display: block;
        }
        #index-nav{
            background-color:none;
            background : #FFF;
            display: none;
            border-bottom: 0;
            position:relative;               
        }

        #index-nav ul li a{
             color:black;
        }
}

jQuery：

$(document).ready(function () {

    $('.menu-trigger').on('click', function () {
        $("#index-nav").slideToggle(400, function () {
            $(this).toggleClass('showing').css('display',' ');
        });
    });
});

Answer 1

你有一个错字 - 你应该在将显示设置为 '' 时删除空格：

用.css('display', '');代替.css('display',' ');