javascript - 响应式 CSS 菜单在调整大小时打开后不会返回全宽

Question

当我调整浏览器大小以查看移动菜单时，一旦我打开菜单，使浏览器变大，它不会将菜单返回到原始状态，即全宽。它与移动 View 保持一致

片段:

$(function() {
  var pull        = $('#pull');
  menu        = $('nav ul');
  menuHeight  = menu.height();

  $(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
  });

  $(window).resize(function(){
    var w = $(window).width();
    if(w > 320 && menu.is(':hidden')) {
      menu.removeAttr('style');
    }
  });

});

nav {
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-right: none;
  width: 100%;
  margin-bottom: 20px;
}
nav ul {
  margin: 0;
  padding: 0;
  width:100%;
}
nav ul li {
  list-style: none;
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
}
nav ul li:first-child {
  border-left: none;
}
nav ul li a {
  display: inline-block;
  text-decoration: none;
  color: #616161;
  padding: 10px 0;
}
nav {
  display: table;
  table-layout: fixed;
}

ul {
  display: flex;
  flex-direction: row;
}
ul li {
  flex-grow: 1;
}
nav a#pull {
  display: none;
}
@media (max-width: 430px) {
  nav {
    font-size: .8em;
  }
  ul {
    display: block;
  }
  nav ul li {
    display: block;
    border-bottom: 1px solid #ccc;
  }

  nav a#pull {
    height: auto;
    display: block;
    background-color: ##ccc;
    width: 100%;
    position: relative;
    text-align: center;
  }
  nav a#pull:after {
    content:"";
    background: url('images/nav-icon.png') no-repeat;
    width: 30px;
    height: 20px;
    position: absolute;
    right: 15px;
    top: 10px;
    text-align: center;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="clearfix">
  <ul class="clearfix">
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="jobs.html">Jobs</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <a href="#" id="pull">Menu</a>
</nav>

Answer 1

这是一个带有较新版本的 jquery 的片段。它似乎有效。

$(function() {
  var pull        = $('#pull');
  menu        = $('nav ul');
  menuHeight  = menu.height();

  $(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
  });

  $(window).resize(function(){
    var w = $(window).width();
    if(w > 320 && menu.is(':hidden')) {
      menu.removeAttr('style');
    }
  });

});

nav {
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-right: none;
  width: 100%;
  margin-bottom: 20px;
}
nav ul {
  margin: 0;
  padding: 0;
  width:100%;
}
nav ul li {
  list-style: none;
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
}
nav ul li:first-child {
  border-left: none;
}
nav ul li a {
  display: inline-block;
  text-decoration: none;
  color: #616161;
  padding: 10px 0;
}
nav {
  display: table;
  table-layout: fixed;
}

ul {
  display: flex;
  flex-direction: row;
}
ul li {
  flex-grow: 1;
}
nav a#pull {
  display: none;
}
@media (max-width: 430px) {
  nav {
    font-size: .8em;
  }
  ul {
    display: block;
  }
  nav ul li {
    display: block;
    border-bottom: 1px solid #ccc;
  }

  nav a#pull {
    height: auto;
    display: block;
    background-color: ##ccc;
    width: 100%;
    position: relative;
    text-align: center;
  }
  nav a#pull:after {
    content:"";
    background: url('images/nav-icon.png') no-repeat;
    width: 30px;
    height: 20px;
    position: absolute;
    right: 15px;
    top: 10px;
    text-align: center;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<nav class="clearfix">
  <ul class="clearfix">
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="jobs.html">Jobs</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <a href="#" id="pull">Menu</a>
</nav>