Question

我的网站有单页布局。

在767px时，菜单会更改以调整不同的分辨率。单击链接时，页面会滚动到正确的位置，但菜单保持打开状态，您必须自己关闭它。

我尝试了在网络上找到的不同的JavaScript代码，但似乎没有一个代码适用于我的代码。我不是很有经验的JS，所以帮助会很棒。

我该如何解决这个问题？

$(document).ready(function() {
  $('.hb-button').on('click', function() {
    $('nav ul').toggleClass('show');
  });
});

nav {
  background: #F7B0C9;
  overflow: hidden;
  position: fixed;
  width: 100%;
  z-index: 5;
  -moz-box-shadow: -2px -7px 47px 9px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: -2px -7px 47px 9px rgba(0, 0, 0, 0.35);
  box-shadow: -2px -7px 47px 9px rgba(0, 0, 0, 0.35);
}

.logo-section {
  float: left;
  padding: 25px;
}

.hb-button {
  float: right;
  background: #F7B0C9;
  color: #ffffff;
  border: none;
  font-size: 20px;
  padding-top: -5px;
  padding-right: 5px;
  padding-bottom: 15px;
  padding-left: 5px;
  border-radius: 3px;
  cursor: pointer;
  display: none;
}

nav a {
  text-decoration: none;
  color: white;
  font-size: 20px;
  padding: 5px;
}

nav ul {
  float: right;
  overflow: hidden;
  color: #fff;
  margin: 0 0 5px 0;
  padding: 0;
  text-align: center;
  transition: max-height 0.5s;
  -webkit-transition: max-height 0.5s;
  -moz-transition: max-height 0.5s;
  -ms-transition: max-height 0.5s;
  -o-transition: max-height 0.5s;
}

nav ul li {
  float: left;
  display: inline-block;
  padding: 20px;
}

li>a {
  position: relative;
  color: white;
  text-decoration: none;
}

li>a:hover {
  color: #FBD7E0;
}

li>a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #FBD7E0;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

li>a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

@media screen and (max-width: 768px) {
  .logo-section {
    float: none;
  }
  nav ul {
    background: #F7B0C9;
    color: white;
    max-height: 0;
    width: 100%;
  }
  nav ul.show {
    max-height: 20em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
  }
  .hb-button {
    display: inline;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav>
  <div class="logo-section">
    <a href="" class="logo" title=""></a>
    <button class="hb-button"><i class="fa fa-bars"></i></button>
  </div>
  <ul>
    <li><a href="#domov">Domov</a></li>
    <li><a href="#o_nas">O nas</a></li>
    <li><a href="#ponudba">Ponudba</a></li>
    <li><a href="#kontakt">Kontakt</a></li>
  </ul>
</nav>

编辑：添加了html和css

Answer 1

我有点作弊并查看了您的代码，您可以复制/js/responsive_nav.js中的现有功能，以关闭导航中任何链接的菜单，就像它对.hb-button一样。完整文件如下所示：

//  file found here:  slascicarstvo-marta.si/js/responsive_nav.js

$(document).ready(function(){
    $('.hb-button').on('click', function(){
        $('nav ul').toggleClass('show');
    });

    $('nav ul li a').on('click', function(){
        $('nav ul').toggleClass('show');
    });
});

如何在点击链接后自动关闭自适应导航？

1 个答案: