Question

这一次，我总是尝试使用bootstrap的默认导航开关进行响应式查看，

这里一切都很好。

我的问题是当屏幕尺寸低于767px时，出现切换栏，当我单击并关闭该切换栏后，它会顺利运行。

但是在我使用切换栏并返回到普通桌面视图之后，顶部菜单的宽度保持为0。

当我同时使用桌面视图和移动视图时，我不想每次都刷新页面。

ps：我已经看过很多帖子，没有任何帮助解决我的问题

这是我的代码段。

   function openNav() {
    document.getElementById("myNav").style.width = "100%";
    }

    function closeNav() {
    document.getElementById("myNav").style.width = "0%";
    }

.menus{float:right;}
a{text-decoration:none!important;}
li{list-style:none; display:inline-block;}
   .toggle{display:none;}
a.closebtn{display:none;}
 .container
 {
 max-width:1180px; 
 margin:0 auto;
  }

@media screen and (max-width:767px)
{
.overlay {height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgba(0,0,0, 0.7);    overflow-x: hidden; transition: 0.5s;}
.overlay-content {position: relative;  top: 13%;  width: 100%; text-align: center;  margin-top: 25px;}
.overlay a {padding: 5px 0; display: block;	color:#fff; transition: 0.6s;}
.overlay a:hover, .overlay a:focus {color:#f0c250;}
.overlay .closebtn {position: absolute;display:block; top: 20px;right: 45px;font-size: 40px;}
.toggle{display:block; margin:10px;}
.toggle span{background:#f0c250; padding:13px; border-radius:4px;}
.menus li{width:90px; margin:auto; display:block;}
}

<div class="container">
<div class="logos col-sm-3">
<img src="images/logo1.png" alt="logo1">
</div>
   	<div class="menus col-sm-9">
<div id="myNav" class="overlay">
 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; 
 </a>
 <div class="overlay-content">
 <ul>
  <li><a href="#">home</a></li>
   	  <li><a href="#">about us</a></li>
   	  <li><a href="#">contact</a></li>				
</ul></div>
</div>
<div class="toggle">
 <span style="cursor:pointer;" onclick="openNav()">&#9776;</span>
</div>
</div>

有什么办法可以解决我的问题？我将不胜感激。

Answer 1

您可以使用element.classList.add("mystyle");和.remove()并在.mystyle{width : 100%}屏幕上添加767px

var element = document.getElementById("myNav");
function openNav() {
    element.classList.add("mystyle");
}

function closeNav() {
    element.classList.remove("mystyle");
}

.menus{float:right;}
a{text-decoration:none!important;}
li{list-style:none; display:inline-block;}
   .toggle{display:none;}

@media screen and (max-width:767px)
{
.overlay {height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgba(0,0,0, 0.7);    overflow-x: hidden; transition: 0.5s;}
.mystyle{width : 100%}
.overlay-content {position: relative;  top: 13%;  width: 100%; text-align: center;  margin-top: 25px;}
.overlay a {padding: 5px 0; display: block;	color:#fff; transition: 0.6s;}
.overlay a:hover, .overlay a:focus {color:#f0c250;}
.overlay .closebtn {position: absolute;display:block; top: 20px;right: 45px;font-size: 40px;}
.toggle{display:block; margin:10px;}
.toggle span{background:#f0c250; padding:13px; border-radius:4px;}
.menus li{width:90px; margin:auto; display:block;}
}

<div class="container">
<div class="logos col-sm-3">
<img src="images/logo1.png" alt="logo1">
</div>
   	<div class="menus col-sm-9">
<div id="myNav" class="overlay">
 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; 
 </a>
 <div class="overlay-content">
 <ul>
  <li><a href="#">home</a></li>
   	  <li><a href="#">about us</a></li>
   	  <li><a href="#">contact</a></li>				
</ul></div>
</div>
<div class="toggle">
 <span style="cursor:pointer;" onclick="openNav()">&#9776;</span>
</div>
</div>

注意：如果用户在767px以下屏幕上打开导航并调整大小到..当他回到767px屏幕时，导航仍将显示..如果您在调整大小时需要关闭导航，为什么低于767px，则需要使用

window.addEventListener('resize' , function(){
   if(screen.width <= 767){
      closeNav();
   }
});

单击切换后

1 个答案: