我无法设置响应式菜单

Question

我想设计一个响应式菜单。其实一切都好。事实上，我知道问题出在哪里。但我无法修复它。代码也在这里：代码在这里：js fiddle

第一个条件是这样的：

第二个条件是这样的：

当我在这里点击菜单没问题时，它的工作原理。但是如果我只使用一次并且在我调整屏幕大小之后，菜单就会丢失，不会再出现。我认为问题是，我在关闭之后打开菜单。在这里，我做 display:none;但我无法修复它。

HTML：

<header>
        <section id="menuBar"><h1> MENU </h1> <i class="fa fa-bars" aria-hidden="true"></i> </section>
        <nav>
            <ul>
                <li><a href="#"> Hakkımda </a></li>
                <li><a href="#"> Portfolyo </a></li>
                <li><a href="#"> İletişim </a></li>
            </ul>
        </nav>
</header>

CSS：

header{
    background-color: #333;
    width: 100%;
    height: 50px;
    box-shadow: 0 0 15px;
    z-index: 555555555555555;
    position: relative;
}

#menuBar{
    display: none;
}

header nav{
    text-align: center;
}

header nav ul{
    display: inline-block;
  list-style-type:none;
}

header nav ul li{
    float: left;
    padding: 15px;
}

header nav ul li a{
    color: white;
    text-decoration: none;
    font-family: roboto;
    font-size: 17px;
}

@media (max-width:768px){

    section#menuBar{
        color: white;
        font-family: roboto;
        font-size: 20px;
        display: block;
        cursor: pointer;

    }

    section#menuBar h1{
        line-height: 50px;
        display: inline-block;
        margin-left: 25px;
    }

    section#menuBar i{
        float: right;
        margin-top: 15px;
        margin-right: 25px;
    }

    header nav{

        height: 152px;
        width: 100%;
        position: absolute;
        display: none;
        background-color: #333;
    }

    header nav ul{
        width: 100%;
        margin-left: -45px;
        position: relative;

    }

    header nav ul li{
        float: none;
        padding-left: 0;
        padding-top: 25px;
        text-align: center;
        display: block;
        border-bottom:1px solid whitesmoke;
        padding-bottom: 7px;
        background-color: #333;
        z-index: 444;
    }

    header nav ul li a{
        color: white;   

    }

JQUERY：

$(function(){

     var width = $(window).outerWidth();
    $('#menuBar').click(function(){
        $('header nav').slideToggle();

        $('header nav ul li').hover(function(){
            $(this).addClass('aktif1');
            $('a',this).addClass('aktif2');
        },function(){
            $(this).removeClass('aktif1');
            $('a',this).removeClass('aktif2');

        });
    });
});

Answer 1

试试这个：

$(window).resize(function() {
  if(!$('#menuBar').is(':visible') && !$('header nav').is(':visible')) {
    $('header nav').show();
  }
});

它检查menuBar是否可见以及菜单本身是否可见，如果两者都不可见，则窗口大于css文件中的断点并显示。

Answer 2

一种解决方案可以是在窗口上绑定调整大小事件，并检查 768px 的 css 断点

$(window).resize(function() {
    if($(window).outerWidth() > 767)
        $('header nav').show();
    else
        $('header nav').hide();
});

根据窗口宽度，重置css属性display。