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

【问题标题】：menu loses background color on screen change菜单在屏幕更改时失去背景颜色
【发布时间】：2017-06-21 09:46:29
【问题描述】：

我的网站桌面版有一个固定的左侧导航。 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？

【问题讨论】：

因为你在媒体查询中设置了width: 0; ..
隐藏移动菜单。当它切换回“桌面”时，它应该遵循常规 CSS 对吧？
确定。 ..对不起，我对此感到困惑..如果你能做一个演示会更好
宽度从class="col2" 设置，其中.col2 { width: 16.66%;} 我不知道如何制作其中之一。
尝试将常规 CSS 上的宽度设置为 250 像素，然后重试

标签： jquery html css

【解决方案1】：

所以我只是在所有内容之后添加了一个检查

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

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

【讨论】：