Question

我正在使用HTML页面，我创建了一个自适应导航菜单。除了一个例外，它工作正常。当我调整浏览器大小并且正常导航切换到响应式下拉菜单时，默认情况下菜单处于打开状态。我希望它默认关闭，只有当用户点击菜单按钮时才会打开。

这是我的HTML代码：

<div class="main-nav" id="navbarResponsive">
  <a href="#" id="pull"></a>
  <ul class="nav navbar-nav" id="respNav">
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#">Blog </a></li>
    <li class="nav-item"><a href="#">Features</a></li>
    <li class="nav-item"><a href="#">Invest</a></li>
    <li class="nav-item"><a href="#">Contact</a></li>
  </ul>
</div>

这是我的jquery代码：

$(function() {
  var pull    = $('#pull');
  menu    = $('.main-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');
  }
});

Answer 1

请将您的css文件手风琴添加到设备的分辨率

.main-nav .navbar-nav{
   display : none;
}

默认情况下，响应式导航打开

1 个答案: