Javascript函数删除媒体查询效果答案

【问题标题】：Javascript function delete media query effectJavascript函数删除媒体查询效果
【发布时间】：2016-08-11 15:57:34
【问题描述】：

我正在开发一个如下图所示的网站：

这个想法是，当点击侧边菜单的按钮时，侧边菜单将关闭，而 bigwrapper 将扩大其大小以适应空白空间，因此结果将如下所示

我已经用 Javascript 编写了一个函数，它工作正常，但是，我想进行媒体查询，当屏幕尺寸小于 840 像素时，让菜单和菜单按钮消失它也工作

现在的问题是如果有人在媒体查询执行之前单击按钮，媒体查询效果将被禁用我认为javascript函数删除媒体查询效果我该如何解决这是代码

 <div id="mySidenav" class="sidenav">
        <img class="menuicons" src="images/icons/menu/home2.png" alt=""><a     href="#">Home</a>
        <img class="menuicons" src="images/icons/menu/offer.png" alt=""><a href="#">Offers</a>
        <img class="menuicons" src="images/icons/menu/cart4.png" alt=""><a href="#">Cart</a>
        <img class="menuicons" src="images/icons/menu/about.png" alt=""><a href="#">About us</a>
        <img class="menuicons" src="images/icons/menu/contact us.png" alt=""><a href="#">Contact us</a>
    </div>

       <div id="menu_button" onclick="nav();categoriesScaler()">
        <img src="images/icons/menu2.png" alt="Not availabale" />
    </div>


   <div id="bigwrapper">
    <!--Some content goes here-->
   </div>

这里是函数

 <script>
   var hidden = false;

function nav()
 {
 if(hidden == false)
 {
     closeNav();
     hidden  = true;
 }
  else
   {
    openNav();
    hidden = false; 
  } 
 }


  function openNav()
   {
    document.getElementById("mySidenav").style.width = "30%";
    document.getElementById("bigwrapper").style.width = "60%";
    document.getElementById("bigwrapper").style.marginLeft = "35%";
   }

  /* Close/hide the sidenav */
  function closeNav() 
   {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("bigwrapper").style.width = "90%";
    document.getElementById("bigwrapper").style.marginLeft = "5%";
   }

 </script>

这是 bigwrapper 的 css，最后的 sidenav 将是媒体查询

/* The side navigation menu */
.sidenav {
height: 800px; /* 100% Full-height */
width: 30%; /* 0 width - change this with JavaScript */
/*position: relative; /* Stay in place */
z-index: 1; /* Stay on top */
/* top: 0;
left: 0;*/
background-color: #292929; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.4s; /* 0.5 second transition effect to slide in the sidenav */
float: left;
box-sizing: border-box;
}

/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
margin-bottom: 25px;
transition: 0.3s;
font-size: 30px;
font-weight: bold;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
 }



/*big wrapper*/
#bigwrapper
{
border : 1px solid #000;
width : 60%;
margin : 0 5% 0 35%;
min-height: 800px;
background:   #F5F5F5;
padding: 3%;
box-sizing: border-box;
transition: 0.4s;

}

这里是媒体查询

@media screen and (max-width : 840px)
{
.sidenav,#menu_button
{
    display: none;
}

#bigwrapper
{
    width: 90%;
    margin-left: 5%;
}
}

抱歉，问题太长了。

【问题讨论】：

不是“在媒体查询执行前点击按钮”的时机。发生这种情况是因为单击设置了内联样式，这是更重要的样式。阅读：developer.mozilla.org/en-US/docs/Web/CSS/Specificity
啊我想我现在明白了。如果浏览器宽度超过 840px 并且点击按钮在#bigwrapper 上设置样式，并且当屏幕宽度小于 840px 时它不会消失，并且它必须回到媒体查询样式......对吗？
是的，这是问题，请问如何解决
我会尽快给你答复。我正在考虑如何在不搞乱你的 hidden = true/false 逻辑的情况下做到这一点。
好的，谢谢您的回复，谢谢您的帮助

标签： javascript jquery html css

【解决方案1】：

你的 openNav 和 closeNav 函数设置的宽度似乎与 css 一致，所以我们可以简单地使用基于宽度的函数，使用 resize 事件进行测试。

我认为以下应该可以工作，并且当浏览器返回 > 840 像素时，导航应该会重新出现。在脚本底部添加：

window.onresize=function(){
   if (window.outerWidth <= 840) {
       closeNav();
   } else {
       openNav();
   }
}

您的按钮也不可见（外部媒体查询），因此将其添加到您的 CSS：

#menu_button {
    display: block; /* or similar style */
}

顺便说一句，使用基于类的系统会简单得多。您可以添加类，而不是设置样式。单击按钮时，您可以将.open 类添加到.sidenav（然后单击下一个按钮删除.open）。然后在您的媒体查询中，您可以设置.sidenav.open { display:none} 的样式，您可以对其他元素的宽度进行类似的操作。您还可以检查 .sidenav 是否有这个 .open 类，而不是使用 var hidden。简单得多。

【讨论】：