首页 文章

调整大小后，响应式导航会消失吗？

提问于
浏览 次
1

我有一个响应式下拉导航，在功能方面经历了相当大的打嗝 .

基本上，页面将正确加载，一切都会工作，等等 . 如果我调整页面大小以显示我的移动导航，它将显示我的汉堡包菜单，让我点击并关闭所有工作 . 但这是问题所在

  • 如果我去手机，打开它，然后调整大小而不关闭它，导航将保持可见 .

  • 如果我去手机，打开它，然后关闭它，然后调整大小，导航将消失 .

我包含了一些基本的HTML我的JS函数，以及指向该网站的链接 .

HTML

<div class="navigation">
  <div class="container1">
    <a class="nav-logo" href="index.html"><img src="img/logo.svg"></a>
    <div class="mobile">
      <ul class="menu nav-left">
        <a href="html/main-pages/portfolio.html"><li class="button">Work</li></a>
        <a href="html/main-pages/resume.html"><li class="button">Resume</li></a>
        <a href="html/main-pages/contact.php"><li class="button">Contact</li></a>
      </ul>

      <ul class="menu nav-right">
        <a href="#"><li class="button"><i class="fa fa-twitter"></i></li></a>
        <a href="#"><li class="button"><i class="fa fa-codepen"></i></li></a>
        <a href="#"><li class="button"><i class="fa fa-linkedin"></i></li></a>
        <a href="#"><li class="button"><i class="fa fa-behance"></i></li></a>
        <a href="#"><li class="button"><i class="fa fa-github"></i></li></a>
      </ul>
    </div>

    <span class="nav-toggle"><a href="#"><i class="fa fa-bars"></i></a></span>
  </div>
</div>

JS

$( document ).ready(function(){
        $(".nav-toggle").click(function(){
        $(".mobile").slideToggle(500);

        });
});

最后但同样重要的是，您可以在 this website 上找到问题 . 感谢大家的帮助，如果有任何问题，我很乐意回答 .

供将来参考，这里是 jsfiddle

jquery html css responsive-design

2 回答

  • 2

    这是因为在移动设备上关闭菜单时， .mobile 将显示无显示 . 这可以通过 !important 修复 .

    @media { /* your desktop media query */
  .mobile {
    display: block !important;
  }
}
    回复于
  • 0
    @media (min-width: 480px) {
    .mobile {display: block !important;}
}
    回复于

相关问题