Question

我的jQuery有点问题。我已经制作了一个响应式导航栏，并希望在接近徽标时添加一个名为“mobile”的类。

这是我的代码：

  function responsiveNav(){
  var navSpace = $(".nav").offset().left;
  if(navSpace < 320){
    $('.nav').addClass('mobile');
    $('.sub-nav').addClass('mobile');
    $('.navbar .container').addClass('container-fluid');
    $('.navbar .container-fluid').removeClass('container');
    $('.navbar-brand > img').css("margin-left", "15px");
    $('.mobile-icon').show();
  } else {
    $('.nav').removeClass('mobile');
    $('.sub-nav').removeClass('mobile');
    $('.navbar .container-fluid').addClass('container');
    $('.navbar .container').removeClass('container-fluid');
    $('.navbar-brand > img').css("margin-left", "0px");
    $('.mobile-icon').hide();
  }
}
$(window).resize(responsiveNav);
$(document).ready(responsiveNav);

它确实有效但当我将屏幕重新调整为普通桌面格式时，我的导航栏仍然具有“移动”类。如何更新我的if / else语句，以便在重新调整大小时删除该类？

谢谢！

Answer 1

更新

您是否也可以发布以下行的输出？

Menu::showMenu(false, true, 'nav navbar-nav navbar-right');

如果你只是在一个片段/小提琴中重现你的问题会更好。

原始

我会将此作为评论添加，但我没有足够的声誉，所以：

我无法重现您的问题，但您的所有代码似乎都可以（请参阅代码段或此小提琴：https://jsfiddle.net/Luc93/kjeu61qu/）。也许你可以提供更多背景？

function responsiveNav(){
  var navSpace = $("#nav").offset().left;
  if(navSpace < 320){
    $('#nav').addClass('mobile');
    $('#nav').removeClass('desktop');
  } else {
    $('#nav').removeClass('mobile');
    $('#nav').addClass('desktop');
  }
}

$(window).resize(responsiveNav);
$(document).ready(responsiveNav);

#nav {
  height:100px;
  width:300px;
  float:right;
}

#nav.desktop {
  background:red;
}

#nav.mobile {
  background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav" class="desktop"></div>

继续更新if / else语句

1 个答案:

更新

原始