Question

我的网站桌面版本有一个固定的左侧导航。 sidenav改变了移动版本的侧面。我在iPad mini上进行测试。在横向中，它显示桌面。在纵向中，它显示移动设备。但是，当我将方向从纵向更改为横向时，sidenav会失去它的背景颜色。如果我单击sidenav中的链接，它将返回。

我正在使用这个CSS（常规）：

.sidenav {
  position: fixed;
  /*width set by col2 [16.66%]*/
  height: 100%;
  left: 0;
  /*top set by $*/
  background-color: #2e2e2e;
}

这个CSS（@media 768）：

.sidenav {
  width: 0;
  height: 100%;
  position: fixed;
  left: auto;
  right: 0;
  z-index: 1;
  background-color: #2e2e2e;
  overflow-x: hidden;
  -webkit-transition: 1s;
  transition: 1s;
  padding-top: 15px;
}

这个jQuery：

if ($(window).width() <= 768) {
  $("#page-menu").click(function() {
    $(this).fadeOut(500,function(){
     $(this).toggleClass("fa-bars fa-close").fadeIn(500);
    });

    var twidth = $(".sidenav").width() == 0 ? "250px" : "0px";

    $(".sidenav").width(twidth);
  });
}

/*When a link is clicked*/
  $(".sidenav a").click(function(){
  /*remove all arrows*/
  $(".arrow").detach();
  /*place arrow on correct link*/
  $(this).append('<div class="arrow"></div>');

  /*remove active-link class from all*/
  $(".sidenav a").removeClass("link-active");
  /*place the link-active class on correct link*/
  $(this).addClass("link-active");

  /*display correct information for link clicked*/
  var id = $(this).attr('id');
  $(".info>div").each(function(){
    if ($(this).hasClass(id)) {
      $(this).removeClass('hidden');
    }
    else {
      $(this).addClass('hidden');
    }
  });

  if ($(window).width() <= 768) {
    var twidth = $(".sidenav").width() == 0 ? "250px" : "0px";

    $(".sidenav").width(twidth);
    $("#page-menu").fadeOut(500,function(){
      $("#page-menu").toggleClass('fa-bars fa-close').fadeIn(500);
    });
  }
});

jQuery的两位混乱了sidenav的宽度。链接仍然显示，但bgc已消失。有没有人看到可能导致这种情况发生的原因？

在任何视图中加载，我可以旋转设备，一切都很好：菜单仍然有bgc。当我处于纵向模式（移动）时，打开导航，关闭导航，旋转到（桌面）bgc消失。

我认为问题是当我从移动版本关闭菜单时，jQuery将sidenav宽度设置为0;这个新宽度现在是一个内联样式，它会覆盖CSS格式。我现在如何从jQuery中将宽度更改回CSS？

Answer 1

所以我只是在一切之后添加了一张支票

if ($(window).width() > 768) {
  $(".sidenav").width('16.66%');
}
else {
  $(".sidenav").width(0);
}

我只是搞砸了有效的内联宽度，将其设置为需要它。

菜单在屏幕更改时失去背景颜色

1 个答案: