单击移动菜单并更改横向菜单后，消失

如何解决单击移动菜单并更改横向菜单后，消失

Scheme of my issue with printscreens我是html和css的新手，无法解决问题。

我正在制作一个响应式网页。我为手机做了一个汉堡菜单，并针对不同的屏幕尺寸和方向应用了@media查询。问题：

如果我在移动设备上打开菜单并更改手机方向-菜单停留在display：block，而不是改为display：flex;
如果我打开和关闭汉堡包-菜单保持显示状态：无，而不显示：flex;
如果刷新页面，一切都很好，并且菜单按照CSS文件中的指示正确显示。

如果我理解正确，则内联操作“ onclick”会阻止我的第二个CSS文件（我有2个文件-一个用于移动设备，第二个-用于其他屏幕）在更改方向后无法正常运行，并且我不知道如何要求这样做。

<script>
  function myFunction() {
    var x = document.getElementById("menu");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  }
 </script>

    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="styles_mob.css" />

</head>
<body>
  <nav>
    <div class="container">
        <div class="logo"><a href="index.html"><img src="img/Jurvale_logo_white.png" alt="Logotipas" width="85%"></a></div>
        <div class="icon"><a href="javascript:void(0);" onclick="myFunction()"><img src="img/icon.png" alt="icon" width="30"></a></div>
        <div class="menuItems" id="menu">
          <div class="col-2 pradzia"><a class="button" href="index.html">Pradžia</a></div>
          <div class="col-2 apieMus"><a class="button" href="#.html">Apie mus</a></div>
          <div class="col-2 paslaugos"><a class="button" href="paslaugos.html">Paslaugos</a></div>
          <div class="col-2 kontaktai"><a class="button" href="kontaktai.html">Kontaktai</a></div>
        </div>
    </div>
  </nav>

这是“ styles_mob.css”

body,html {
  width: 100%;
  height: 100%;
  font-family: 'Open Sans Condensed',sans-serif;
  font-size: 1.1rem;
  margin: 0px;
  background-image: none;
  background-color: #ffffff;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

* {
  box-sizing: border-box;
}

[class*="col-"] {
  width: 100%;
  height: 100%;
  border: none solid 2px;
}

.container {
  display: grid;
  grid-template-columns: 80% 20%;
  grid-template-rows:auto auto;
  overflow: hidden;
  position: relative;
  background-color: #FD5C6B;
  padding: 10px;
  justify-items: center;
  align-items: center;
  text-align: center;
}

.container #menu {
  display: none;
}

.logo img {
  max-width: 250px;
}

.menuItems {
  grid-column: 1 / span 2;
  grid-row: 2;
  width: 100%;
  border-bottom: white solid 1px;
}

这是“ styles.css”

body,sans-serif;
  font-size: 1.2rem;
  margin: 0px;
  background-image: url('img/back.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

* {
  box-sizing: border-box;
}

[class*="col-"] {
  width: 100%;
  height: 100%;
}

/* -----Big screen in landscape mode----- */
@media screen and (min-width: 480px) and (orientation: landscape) {
  body {
    display: grid;
    grid-template-columns: 40% 30% 30%;
    grid-template-rows:minmax(auto,100px) auto 50% auto;
  }

  .hidden {
    display: none;
  }
  .icon {
    display: none;
  }
  .container2 {
    grid-row:3 / span 1;
    text-align: center;
  }

  .container .menuItems {
    grid-column: 2 / span 1;
    grid-row: 1;
    width: 100%;
  }

  .motoPosition {
    width: 100%;
  }
  .orderPosition {
    width: 100%;
  }
}

/* -----Big screen in portrait mode----- */
@media screen and (min-width: 480px) and (orientation: portrait) {
  body {
    display: grid;
    grid-template-columns: 10% 50% 40%;
    grid-template-rows:minmax(auto,100px) auto 40% auto;
  }

  .hidden {
    display: none;
  }
  .icon {
    display: none;
  }
  .container2 {
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
    text-align: center;
  }

  .container .menuItems {
    grid-column: 2 / span 1;
    grid-row: 1;
    width: 100%;
  }
}

nav {
  grid-column: 1 / span 3;
  grid-row: 1;
  display: grid;
  grid-template-columns: 100%;
  text-align: center;
}

.menuItems {
  display: flex;
}

.container {
  grid-column: 1 / span 1;
  display: grid;
  grid-template-columns: 25% 75%;
  justify-items: center;
  align-items: center;
  background-color: RGBA(253,92,107,0.7);
}

.logo {
  grid-column: 1 / span 1;
  grid-row: 1;
  width: 100%;
  padding: 5px 10px;
}

.logo img {
  max-width: 250px;
}

提前谢谢！

单击移动菜单并更改横向菜单后，消失

如何解决单击移动菜单并更改横向菜单后，消失

相关推荐