Question

我是初学者，需要一些建议。我正在尝试建立汉堡包菜单和我的菜单，通过关闭按钮关闭后，当我将屏幕调整为更大的分辨率时，也没有显示。有人可以帮帮我吗？这是代码：

<header class="page-header">
  <div class="logo-wrapper">
    <i class="fa fa-superpowers" aria-hidden="true"></i>
  </div>
  <button class="menu-open">O</button>
  <button class="menu-close">X</button>
  <nav class="nav-bar">
    <ul class="nav-list">
      <li class="nav-item">Home</li>
      <li class="nav-item">About</li>
      <li class="nav-item">Projects</li>
      <li class="nav-item">Contact</li>
      <li class="nav-item">Sign up</li>
    </ul>
  </nav>
</header>

CSS：

.page-header {
  position: relative;
  background-color: #FFFFFF;
 }

.logo-wrapper {
  padding: 20px;
}

.menu-open {
  position: absolute;
  top: 0;
  right: 15px;
}

.menu-close {
  position: absolute;
  top: 0;
  right: 15px;
}

.nav-bar {
  text-align: center;
  display: none;
}

.nav-list {
  list-style: none;
  padding: 0;
}

.nav-item {
  padding: 12px 0;
  border-bottom: 1px solid #FAFAFA;
}

/*---MEDIA QUERIES---*/

    @media screen and (min-width: 768px) {
  button {
    display: none;
  }

  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-bar {
    display: block;
  }

  .nav-item {
    display: inline-block;
    padding: 10px 15px;
  }
}

Jquery的：

    $(document).ready(function(){

      $(".menu-close").hide();

      $(".menu-open").click(function() {
    $(".nav-bar").slideToggle("slow", function() {
      $(".menu-open").hide();
      $(".menu-close").show();
    });
  });

      $(".menu-close").click(function() {
    $(".nav-bar").slideToggle("slow", function() {
      $(".menu-close").hide();
      $(".menu-open").show();
    });
  });
});

Answer 1

    $(window).on("resize", function(event){ 
if( $(this).width() > 767 ){
 $('.nav-bar').show();
 });

关闭后，显示：将不会应用它，这就是它不会出现的原因。另一种选择是添加display：block！重要;在媒体查询屏幕最小宽度767px

在汉堡包关闭之后在更大的设备上显示菜单

1 个答案: