Question

我创建了一个响应式导航栏，但问题就在这里，当我进入移动宽度并打开和关闭导航栏，然后我调整到正常宽度，导航栏就不再存在了，我必须刷新才能再次出现。我使用jQuery来切换一个在display：block和display：none之间激活的类，当我打开和关闭导航栏然后我调整到全宽我认为它仍然显示：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

您在那里输了一个拼写错误 - 将显示设置为＆＃39;＆＃39;

时应删除空格

而不是.css('display',' ');使用.css('display', '');

导航栏消失在移动屏幕宽度下方

1 个答案: