javascript - 智能手机固定导航栏在选择后不关闭

Question

我从这个论坛得到了一些很好的信息，这是我的第一个问题，所以很好..

我有一个固定的顶部导航栏。

固定部分似乎工作正常，但我现在有两个问题。

在响应模式下，当您单击汉堡包图标时，它会漂亮地打开，您可以跳转到页面上的任何 anchor (我正在设计一个单页网站)。但是导航不会在点击或点击时关闭，所以我只剩下一个打开的导航。

第二个问题是当导航固定时，我向下滚动并浏览表单时，表单字段显示在导航栏的顶部，宽度为 960 且响应式。

我在这里附上了我认为是代码的内容，我们将不胜感激任何建议。

干杯 最大

这是 html:

<nav class="clearfix">
<ul class="clearfix">
    <li><a href="index.html"><span style="color:white">Home</a>
    </li>
    <li><a href="book.html"><span style="color:white">Book</a>
    </li>
    <li><a href="#join"><span style="color:white">Join</a>
    </li>
    <li><a href="contact.html"><span style="color:white">Contact</a>
    </li>
   </ul>
   <a href="#" id="pull"><span style="color:white">Menu</span></a>

这是CSS:

/* Clearfix */

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */

nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
}
nav ul {
padding: 0;
margin: 0 auto;
width: auto;
height: 40px;
}
nav li {
display: inline;
float: none;
}
nav a {
color: #fff;
display: inline-block;
width: 120px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px #303030;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/

@media screen and (max-width: 600px) {
nav {
    height: auto;
}
nav ul {
    width: 100%;
    display: block;
    height: auto;
}
nav li {
    width: 50%;
    float: left;
    position: relative;
}
nav li a {
    border-bottom: 1px solid #576979;
    border-right: 1px solid #576979;
}
nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/

@media only screen and (max-width: 600px) {
nav {
    border-bottom: 0;
}
nav ul {
    display: none;
    height: auto;
}
nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
}
nav a#pull:after {
    content: "";
    background: url('../images/nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
}
}
/*Smartphone*/

@media only screen and (max-width: 320px) {
nav li {
    width: 50%;
    float: left;
    position: relative;
}
nav li a {
    border-bottom: 1px solid #576979;
}
}

这是java脚本:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

    $(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');
            }
        });
    });


</script>

Answer 1

对于第一个问题添加这个js:

$('nav li>a').on('click', function (e) {
   if($(window).width()<600){
     menu.slideUp();
   }
 });

完整代码如下:

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

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

  $('nav li>a').on('click', function(e) {
    if ($(window).width() < 600) {
      menu.slideUp();
    }
  });

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

/* Clearfix */

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
/* Basic Styles */

nav {
  height: 40px;
  width: 100%;
  background: #455868;
  font-size: 1em;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  position: fixed;
  border-bottom: 2px solid #283744;
  text-align: center;
  z-index: 99;
}
nav ul {
  padding: 0;
  margin: 0 auto;
  width: auto;
  height: 40px;
}
nav li {
  display: inline;
  float: none;
}
nav a {
  color: #fff;
  display: inline-block;
  width: 120px;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  text-shadow: 1px 1px #303030;
}
nav li a {
  border-right: 1px solid #576979;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
nav li:last-child a {
  border-right: 0;
}
nav a:hover,
nav a:active {
  background-color: #8c99a4;
}
nav a#pull {
  display: none;
}
/*Styles for screen 600px and lower*/

@media screen and (max-width: 600px) {
  nav {
    height: auto;
  }
  nav ul {
    width: 100%;
    display: block;
    height: auto;
  }
  nav li {
    width: 50%;
    float: left;
    position: relative;
  }
  nav li a {
    border-bottom: 1px solid #576979;
    border-right: 1px solid #576979;
  }
  nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
  }
}
/*Styles for screen 515px and lower*/

@media only screen and (max-width: 600px) {
  nav {
    border-bottom: 0;
  }
  nav ul {
    display: none;
    height: auto;
  }
  nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
  }
  nav a#pull:after {
    content: "";
    background: url('../images/nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
  }
}
/*Smartphone*/

@media only screen and (max-width: 320px) {
  nav li {
    width: 50%;
    float: left;
    position: relative;
  }
  nav li a {
    border-bottom: 1px solid #576979;
  }
}

<nav class="clearfix">
  <ul class="clearfix">
    <li><a href="index.html"><span style="color:white">Home</a>

    </li>
    <li><a href="book.html"><span style="color:white">Book</a>

    </li>
    <li><a href="#join"><span style="color:white">Join</a>

    </li>
    <li><a href="contact.html"><span style="color:white">Contact</a>

    </li>
  </ul> <a href="#" id="pull"><span style="color:white">Menu</span></a>

</nav>

ul>li>a 可以根据需要使用 ID 或类进行更改。

对于第二个问题添加这个CSS:

nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
z-index: 99;
}

DEMO