当我在移动用户分辨率导航菜单项不显示内联后更改桌面用户的屏幕分辨率时

Question

我正在尝试为移动用户构建响应式切换导航菜单。当移动用户在屏幕上显示屏幕分辨率时，我单击切换导航框，它显示导航项块，当我再次单击切换导航框时，它显示导航项 none。但是当我为桌面用户更改屏幕分辨率时，导航菜单不显示内联。

function print(message) {
  document.write(message);
}

let myNavBox = document.getElementById("navBox");
let myNavLinks = document.getElementById("navLinks");

myNavBox.onclick = function() {

  if (myNavLinks.style.display == "block") {
    myNavLinks.style.display = "none";
  } else {
    myNavLinks.style.display = "block";
  }

}

body {
  background: #191970;
  font-family: sans-serif, serif;
}

h1 {
  font-family: 'Prata', serif;
  text-align: center;
  font-size: 35px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #000;
  font-size: 25px;
}

#navBox {
  width: 50px;
  height: 50px;
  border: 2px solid #c0c0c0;
  background: #7b68ee;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  font-size: 20px;
  line-height: 15px;
  text-align: center;
}

#navBox:hover,
li:hover {
  background-color: #6a5acd;
}

#navLinks {
  display: none;
}


/******** Responsive ********/

@media screen and (min-width:660px) {
  body {}
  #navLinks {
    display: block;
  }
  #navBox {
    display: none;
  }
  li {
    display: inline-block;
    margin-right: 15px;
  }
}

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>Toggle Navigation</title>
  <link href="https://fonts.googleapis.com/css?family=Prata" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <nav id="nav">
    <h1> Toggle Navigation Tutorial </h1>
    <div id="navBox" title="Toggle Navigation"> ------- </br>
      ------- </br>------- </br>
    </div>
    <div id="navLinks">
      <ul id="topNav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

  </nav>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

我的代码可以工作，但是当 navLinks 显示为 none 我的代码无法在大屏幕分辨率下工作。

Answer 1

只需添加

display: block!important;

在@media

function print(message) {
  document.write(message);
}

let myNavBox = document.getElementById("navBox");
let myNavLinks = document.getElementById("navLinks");

myNavBox.onclick = function() {

  if (myNavLinks.style.display == "block") {
    myNavLinks.style.display = "none";
  } else {
    myNavLinks.style.display = "block";
  }

}

body {
  background: #191970;
  font-family: sans-serif, serif;
}

h1 {
  font-family: 'Prata', serif;
  text-align: center;
  font-size: 35px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #000;
  font-size: 25px;
}

#navBox {
  width: 50px;
  height: 50px;
  border: 2px solid #c0c0c0;
  background: #7b68ee;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  font-size: 20px;
  line-height: 15px;
  text-align: center;
}

#navBox:hover,
li:hover {
  background-color: #6a5acd;
}

#navLinks {
  display: none;
}


/******** Responsive ********/

@media screen and (min-width:660px) {
  body {}
  #navLinks {
    display: block!important;
  }
  #navBox {
    display: none;
  }
  li {
    display: inline-block;
    margin-right: 15px;
  }
}

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>Toggle Navigation</title>
  <link href="https://fonts.googleapis.com/css?family=Prata" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <nav id="nav">
    <h1> Toggle Navigation Tutorial </h1>
    <div id="navBox" title="Toggle Navigation"> ------- </br>
      ------- </br>------- </br>
    </div>
    <div id="navLinks">
      <ul id="topNav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

  </nav>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

当我在移动用户分辨率导航菜单项不显示内联后更改桌面用户的屏幕分辨率时

When I change screen resolution for desktop user after mobile user resolution Navigation Menu Item not display inline

html

javascript

css

uinavigationbar

responsive-design