时间戳

首页 > 解决方案 > 使用 Javascript 调整屏幕大小时覆盖样式（由前一个函数给出）

javascript - 使用 Javascript 调整屏幕大小时覆盖样式（由前一个函数给出）

问题描述

我在网站移动版的标题中有一个按钮（<620px）。单击此按钮时，它将运行我的“mobileNav”功能，该功能在“显示：无”之间切换移动导航；和“显示：弯曲；”。效果很好！但是，如果我在屏幕 <620px 时打开菜单然后将屏幕调整为更大，移动导航仍然显示（并且由于网站的设计，无法关闭）。

我需要弄清楚如何将按钮恢复为“关闭”状态。或覆盖当屏幕变大时单击按钮放置的样式（例如，按钮单击使#mobile-nav“显示：flex;”，如果屏幕被调整大小，覆盖由按钮单击实现的并使#mobile-中殿“显示：无；”。

这是一个代码片段。CSS 变得有点杂乱，但关键点是：

// SEARCH DROPDOWN--------------------------------------------------

function searchButton() {
  var x = document.getElementById("searchbar-wrap");
  if (x.style.transform === "scale(1)") {
    x.style.transform = "scale(1,0)";
  } else {
    x.style.transform = "scale(1)";
  }

  var x = document.getElementById("searchbar");
  if (x.style.transform === "scale(1)") {
    x.style.transform = "scale(1,0)";
  } else {
    x.style.transform = "scale(1)";
  }
}

// MOBILE NAV--------------------------------------------------

function mobileNav() {
  // Rotate Buger One and Reposition
  var x = document.getElementById("burger-one");
  if (x.style.transform === "rotate(45deg)") {
    x.style.transform = "rotate(0deg)";
    x.style.width = "40px";
    x.style.top = "15px";
  } else {
    x.style.transform = "rotate(45deg)";
    x.style.width = "20px";
    x.style.top = "18.4px";
  }

  // Rotate Buger Two and Reposition
  var x = document.getElementById("burger-two");
  if (x.style.transform === "rotate(-45deg)") {
    x.style.transform = "rotate(0deg)";
    x.style.width = "40px";
    x.style.bottom = "15px";
  } else {
    x.style.transform = "rotate(-45deg)";
    x.style.width = "20px";
    x.style.bottom = "18.4px";
  }

  // Show/Hide Mobile Nav
  var x = document.getElementById("mobile-nav");
  if (x.style.display === "flex") {
    x.style.display = "none";
  } else {
    x.style.display = "flex";
  }

  // Prevent Body from Scrolling Behind Mobile Nav
  var x = document.getElementById("body");
  if (x.style.overflow === "hidden") {
    x.style.overflow = "scroll";
  } else {
    x.style.overflow = "hidden";
  }

}
/*NAVIGATION--------------------------------------*/

.logo {
  width: 75px;
}

nav {
  width: calc(100% - 75px);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

header ul {
  text-decoration: none;
  list-style-type: none;
  padding: 0px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
}

.mobile-nav ul {
  width: 100%;
  padding-left: 0px;
}

header li,
.mobile-nav li,
.button-wrap {
  text-decoration: none;
  background-color: transparent;
  height: 60px;
  padding-left: 10px;
  padding-right: 10px;
  transition: all 0.5s ease;
  border-right: 1px #334c22 solid;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.mobile-nav li {
  width: calc(100% - 20px);
  background-color: #3f5d21;
  margin-top: 10px;
}

.mobile-nav li:hover {
  background-color: #ece5d0;
  transition: all 0.5s ease;
  color: #3f5d21;
}

.mobile-li:hover .nav-text {
  color: #3f5d21;
}

.mobile-nav section {
  flex-direction: column;
}

header li:hover,
.button-wrap:hover {
  background-color: #334c22;
  transition: all 0.5s ease;
}

li:hover .nav-text {
  color: #8cc257;
  transition: all 0.5s ease;
}

.button-wrap:hover button {
  color: #8cc257;
  transition: all 0.5s ease;
}

.nav-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  transition: all 0.5s ease;
}

#searchbar,
#searchbar-wrap {
  transform: scale(1, 0);
  transform-origin: top;
  transition: all 0.5s ease;
}

#searchbar-wrap {
  height: 40px;
}

#searchbar {
  height: 25px;
}

input {
  border: none;
  width: 100%;
  height: 25px !important;
  transition: all 0.5s ease;
  outline: none;
  padding-left: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}

nav button,
.searchbar-wrap button {
  height: 100%;
  width: 100%;
  border: none;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
  outline: none;
}

.searchbutton-wrap {
  height: 25px;
  background-color: #3f5d21;
  padding-left: 10px;
  padding-right: 10px;
  transition: all 0.5s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.searchbutton-wrap:hover {
  background-color: #ede5d0;
  transition: all 0.5s ease;
  color: #3f5d21;
}

.searchbutton-wrap:hover button {
  color: #3f5d21;
}

.searchbar-wrap {
  position: absolute;
  width: 100vw;
  margin-top: 50px;
  background-color: #334c22;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.mobile-nav .searchbar-wrap,
.mobile-nav input {
  position: relative;
  width: 100%;
  height: 60px;
  margin-top: 0px;
}

.searchbar-wrap section {
  justify-content: flex-end;
}

form {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.mobile-nav {
  height: calc(100vh - 60px);
  width: 100vw;
  margin-top: 60px;
  background-color: #334c22;
  position: fixed;
  z-index: 998;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.mobile-nav ul {
  margin-top: 0px;
}

.mobile-nav .searchbutton-wrap {
  height: 60px;
}

.mobile-nav .searchbar-wrap {
  margin-top: 30px;
}

.mobile-nav #searchbar-wrap,
.mobile-nav #searchbar {
  transform: scale(1, 1);
}

.mobile-nav input {
  height: 60px !important;
}


/*Mobile Nav Button*/

#mobile-nav {
  display: none;
}

.mobile-nav-button {
  height: 40px;
  width: 40px;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  overflow: visible;
  display: none;
}

.mobile-nav-button:hover .hamburger {
  background-color: #8cc257;
  transition: all 0.5s ease;
}

.hamburger {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  height: 3px;
  width: 40px;
  border-radius: 999px;
  background-color: #ffffff;
  transition: all 0.5s ease;
}

#burger-one,
#burger-two {
  transform: rotate(0deg);
}

#burger-one {
  top: 15px;
}

#burger-two {
  bottom: 15px;
}


/*NAVIGATION END--------------------------------------*/


/*MASTER ITEMS--------------------------------------*/

body {
  margin: 0px;
  padding: 0px;
  position: relative;
}

header {
  width: 100%;
  height: 60px;
  background-color: #3f5d21;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  margin: auto;
  top: 0;
  z-index: 9999;
  box-shadow: 0px 0px 20px #000000;
}

section {
  width: 80%;
  max-width: 1200px;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a {
  text-decoration: none;
  color: inherit;
}


/*MASTER ITEMS END--------------------------------------*/


/*TEXT--------------------------------------*/

p {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 15px;
}

.text-small {
  font-size: 10px;
  font-weight: 400;
}

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  color: #000000;
  font-size: 50px;
  margin-bottom: 0px;
}

h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: #3f5d21;
}

h3 {
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 15px;
}

.hero h1 {
  color: #ffffff;
}

.hero p,
.section-headline p {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  color: #8cc257;
  font-size: 20px;
  margin-top: 0px;
}

.column p {
  margin-top: 0px;
}


/*TEXT END--------------------------------------*/


/*MOBILE--------------------------------------*/

@media only screen and (max-width: 620px) {
  .desktop-nav {
    display: none;
  }
  .mobile-nav-button {
    display: block;
  }
  header .searchbar-wrap {
    display: none;
  }
}
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;900&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/619b94aa86.js" crossorigin="anonymous"></script>
  <title>Craft Testing</title>
</head>

<body id="body">
  <header>
    <section>

      <img src="https://www.abettermancc.com/wp-content/uploads/2020/04/jeep-logo-white.png" class="logo" alt="">

      <nav class="desktop-nav">
        <ul>
          <a href="#">
            <li>
              <p class="nav-text">Gallery</p>
            </li>
          </a>
          <a href="#">
            <li>
              <p class="nav-text">Custom Shop</p>
            </li>
          </a>
          <a href="#">
            <li>
              <p class="nav-text">Apparel</p>
            </li>
          </a>
        </ul>
        <div class="button-wrap">
          <button onclick="searchButton()" type="button"><i class="fa fa-search"></i></button>
        </div>
      </nav>

      <button onclick="mobileNav()" class="mobile-nav-button">
					<div class="hamburger" id="burger-one">
					</div>
					<div class="hamburger burger-two" id="burger-two">
					</div>
				</button>

    </section>

    <div class="searchbar-wrap" id="searchbar-wrap">
      <section>
        <form action="/action_page.php">
          <input id="searchbar" type="text" placeholder="Search.." name="search">
          <div class="searchbutton-wrap">
            <button type="submit"><i class="fa fa-search"></i></button>
          </div>
        </form>
      </section>
    </div>

  </header>

  <nav class="mobile-nav" id="mobile-nav">
    <section>
      <div class="searchbar-wrap">
        <form action="/action_page.php">
          <input id="searchbar" type="text" placeholder="Search.." name="search">
          <div class="searchbutton-wrap">
            <button type="submit"><i class="fa fa-search"></i></button>
          </div>
        </form>
      </div>
      <ul>
        <a href="#">
          <li class="mobile-li">
            <p class="nav-text">Gallery</p>
          </li>
        </a>
        <a href="#">
          <li class="mobile-li">
            <p class="nav-text">Custom Shop</p>
          </li>
        </a>
        <a href="#">
          <li class="mobile-li">
            <p class="nav-text">Apparel</p>
          </li>
        </a>
      </ul>
    </section>

  </nav>

</body>

</html>

标签： javascripthtmlcss

解决方案

快速解决...

一旦resize事件发生，隐藏移动菜单？

这也可能会发生在纵向/横向变化......但它也可能有用。你来决定。

window.addEventListener("resize", ()=>{
  if(document.getElementById("mobile-nav").style.display === "flex"){

    // Use the existing function to close it
    mobileNav();
  }
});

代码笔

推荐阅读