响应式导航栏：菜单不会消失（CSS 和 JS）

时间：2021-04-19 21:52:19

标签： javascript css navbar

构建响应式菜单栏。问题是当您单击汉堡包线并出现页面选项时，当您单击链接时，菜单不会消失。我试过添加和删除一个类消失{display:none}，我也试过构建一个 for 循环，但都不起作用。我知道我想得太多了，我应该探索哪些选项来解决它？

（请注意，如果当前无法点击，您可能需要将屏幕缩小到小于 600 像素的宽度才能看到汉堡菜单）

lkl;

const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');

toggleBtn.addEventListener("click", function(){ 
  if(!menuBtn.classList.contains("open")){
    menuBtn.classList.add('open');
  }else{
    menuBtn.classList.remove('open');
  }
});


document.getElementsByClassName('.links').forEach(item => {
  item.addEventListener('click', event => {
    document.getElementById('nav_check').checked = false;
    menuBtn.classList.remove('open');
  })
})
* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  background:#d3d3d3;
}

.navBar {
  width: 100%;
  height:3.3rem;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  background-color: #0A2463;
  position: fixed;
  color:#fafafa;
}

.nav_btn {
  display:none;
}

.nav_links > a {
  padding: .5rem;
  margin:auto;
  text-decoration: none;
  color:#fafafa;
}

.nav_links > a:hover {
  color:#ED1250;
}

#nav_check, #nav_icon {
  display: none;
}

.resume{
  color:#ED1250;
  border-radius:4px;
  border:solid #ED1250 1px;
  padding:.5rem;
  margin-right:.5rem;
}

.resume:hover {
  background:rgb(237, 18, 80,.2);
  color:#fafafa;
}

.social{
  display:none;
}


@media (max-width:600px) {
 .navBar{
   height:3.3rem;
  }
  
.nav_btn {
    display: inline-block;
    float:right;
  }

#nav_icon{
  display:block;
  width: 60px;
  height: 45px;
  position: fixed;
  right:1rem;
  top:-3rem;
  margin: 50px auto;
  z-index:6;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  
  border:solid orange 2px;
}

  #nav_icon span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #fafafa;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav_icon span:nth-child(1) {
  top: 0px;
}

#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
  top: 18px;
}

#nav_icon span:nth-child(4) {
  top: 36px;
}

#nav_icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav_icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav_icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav_icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
  
.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display:none;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  text-transform:uppercase;
  font-weight:400;
  line-height:4.5rem;
  font-size:3rem;
  background:#0A2463;
} 

.menu_textWrapper{
    display:flex;
    flex-direction:column !important;
    width:18rem;
    background:#0A2463;
  }  

.links:hover::after{
  content:"»";
  font-size:2.5rem;
  }
  
#nav_check:not(:checked) ~ menu {
    display:none;
  }
  
.navBar > #nav_check:checked ~ .menu {
    display:flex;
    flex-direction:column;
  }
  
  
  
}/*closing bracket for media query*/
<div class="navBar">
  <input type="checkbox" id="nav_check">
  <div class="nav_btn">
    <label for="nav_check" class="hamburgerLines" id="nav_icon">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>
  <div class="menu">
   <div class="menu_textWrapper"> 
    <div class="nav_links">
      <a href="#about" class="links">About</a>
      <a href="#projects" class="links">Projects</a>
      <a href="#contact" class="links">Contact</a>
      <a href="/resume.pdf" target="_blank"><span class="resume">Resume</span></a>
    </div>
  </div>   
 </div>   
</div>

3 个答案:

答案 0 :(得分：2)

  • 在使用 getElementsByClassName 时，您不应在指定类时使用 .。
  • getElementsByClassName 返回没有 HTMLCollection 循环的 forEach，因此您需要将其转换为 array 为：

const linksArray = [...links]; 或 const linksArray = Array.from( links );

  • 您也可以使用 querySelectorAll(".links")

const toggleBtn = document.getElementById("nav_check");
const menuBtn = document.getElementById("nav_icon");

toggleBtn.addEventListener("click", function() {
  if (!menuBtn.classList.contains("open")) {
    menuBtn.classList.add("open");
  } else {
    menuBtn.classList.remove("open");
  }
});

const links = document.getElementsByClassName("links");
const linksArray = [...links];

linksArray.forEach((item) => {
  item.addEventListener("click", (event) => {
    document.getElementById("nav_check").checked = false;
    menuBtn.classList.remove("open");
  });
});
* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  background: #d3d3d3;
}

.navBar {
  width: 100%;
  height: 3.3rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #0A2463;
  position: fixed;
  color: #fafafa;
}

.nav_btn {
  display: none;
}

.nav_links>a {
  padding: .5rem;
  margin: auto;
  text-decoration: none;
  color: #fafafa;
}

.nav_links>a:hover {
  color: #ED1250;
}

#nav_check,
#nav_icon {
  display: none;
}

.resume {
  color: #ED1250;
  border-radius: 4px;
  border: solid #ED1250 1px;
  padding: .5rem;
  margin-right: .5rem;
}

.resume:hover {
  background: rgb(237, 18, 80, .2);
  color: #fafafa;
}

.social {
  display: none;
}

@media (max-width:600px) {
  .navBar {
    height: 3.3rem;
  }
  .nav_btn {
    display: inline-block;
    float: right;
  }
  #nav_icon {
    display: block;
    width: 60px;
    height: 45px;
    position: fixed;
    right: 1rem;
    top: -3rem;
    margin: 50px auto;
    z-index: 6;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    border: solid orange 2px;
  }
  #nav_icon span {
    display: block;
    position: absolute;
    height: 9px;
    width: 100%;
    background: #fafafa;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  #nav_icon span:nth-child(1) {
    top: 0px;
  }
  #nav_icon span:nth-child(2),
  #nav_icon span:nth-child(3) {
    top: 18px;
  }
  #nav_icon span:nth-child(4) {
    top: 36px;
  }
  #nav_icon.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
  }
  #nav_icon.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #nav_icon.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #nav_icon.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
  }
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 4.5rem;
    font-size: 3rem;
    background: #0A2463;
  }
  .menu_textWrapper {
    display: flex;
    flex-direction: column !important;
    width: 18rem;
    background: #0A2463;
  }
  .links:hover::after {
    content: "»";
    font-size: 2.5rem;
  }
  #nav_check:not(:checked)~menu {
    display: none;
  }
  .navBar>#nav_check:checked~.menu {
    display: flex;
    flex-direction: column;
  }
}


/*closing bracket for media query*/
<div class="navBar">
  <input type="checkbox" id="nav_check">
  <div class="nav_btn">
    <label for="nav_check" class="hamburgerLines" id="nav_icon">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </label>
  </div>
  <div class="menu">
    <div class="menu_textWrapper">
      <div class="nav_links">
        <a href="#about" class="links">About</a>
        <a href="#projects" class="links">Projects</a>
        <a href="#contact" class="links">Contact</a>
        <a href="/resume.pdf" target="_blank"><span class="resume">Resume</span></a>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：2)

问题是像这样使用 getElementsByClassName document.getElementsByClassName('.links').forEach 你不能使用 forEach 和 .linke css 选择器 getElementsByClassName 使用 querySelectorAll 

const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');

toggleBtn.addEventListener("click", function(){ 
  if(!menuBtn.classList.contains("open")){
    menuBtn.classList.add('open');
  }else{
    menuBtn.classList.remove('open');
  }
});


document.querySelectorAll('.links').forEach(item => {
  item.addEventListener('click', event => {
    document.getElementById('nav_check').checked = false;
    menuBtn.classList.remove('open');
  })
})
* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  background:#d3d3d3;
}

.navBar {
  width: 100%;
  height:3.3rem;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  background-color: #0A2463;
  position: fixed;
  color:#fafafa;
}

.nav_btn {
  display:none;
}

.nav_links > a {
  padding: .5rem;
  margin:auto;
  text-decoration: none;
  color:#fafafa;
}

.nav_links > a:hover {
  color:#ED1250;
}

#nav_check, #nav_icon {
  display: none;
}

.resume{
  color:#ED1250;
  border-radius:4px;
  border:solid #ED1250 1px;
  padding:.5rem;
  margin-right:.5rem;
}

.resume:hover {
  background:rgb(237, 18, 80,.2);
  color:#fafafa;
}

.social{
  display:none;
}


@media (max-width:600px) {
 .navBar{
   height:3.3rem;
  }
  
.nav_btn {
    display: inline-block;
    float:right;
  }

#nav_icon{
  display:block;
  width: 60px;
  height: 45px;
  position: fixed;
  right:1rem;
  top:-3rem;
  margin: 50px auto;
  z-index:6;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  
  border:solid orange 2px;
}

  #nav_icon span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #fafafa;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav_icon span:nth-child(1) {
  top: 0px;
}

#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
  top: 18px;
}

#nav_icon span:nth-child(4) {
  top: 36px;
}

#nav_icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav_icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav_icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav_icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
  
.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display:none;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  text-transform:uppercase;
  font-weight:400;
  line-height:4.5rem;
  font-size:3rem;
  background:#0A2463;
} 

.menu_textWrapper{
    display:flex;
    flex-direction:column !important;
    width:18rem;
    background:#0A2463;
  }  

.links:hover::after{
  content:"»";
  font-size:2.5rem;
  }
  
#nav_check:not(:checked) ~ menu {
    display:none;
  }
  
.navBar > #nav_check:checked ~ .menu {
    display:flex;
    flex-direction:column;
  }
  
  
  
}/*closing bracket for media query*/
<div class="navBar">
  <input type="checkbox" id="nav_check">
  <div class="nav_btn">
    <label for="nav_check" class="hamburgerLines" id="nav_icon">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>
  <div class="menu">
   <div class="menu_textWrapper"> 
    <div class="nav_links">
      <a href="#about" class="links">About</a>
      <a href="#projects" class="links">Projects</a>
      <a href="#contact" class="links">Contact</a>
      <a href="/resume.pdf" target="_blank"><span class="resume">Resume</span></a>
    </div>
  </div>   
 </div>   
</div>

答案 2 :(得分：1)

const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');

toggleBtn.addEventListener("click", function(){ 
  if(!menuBtn.classList.contains("open")){
    menuBtn.classList.add('open');
  }else{
    menuBtn.classList.remove('open');
  }
});
[].forEach.call( document.getElementsByClassName('links'), item => {
  item.addEventListener('click', event => {
    document.getElementById('nav_check').checked = false;
    menuBtn.classList.remove('open');
  })
});
* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  background:#d3d3d3;
}

.navBar {
  width: 100%;
  height:3.3rem;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  background-color: #0A2463;
  position: fixed;
  color:#fafafa;
}

.nav_btn {
  display:none;
}

.nav_links > a {
  padding: .5rem;
  margin:auto;
  text-decoration: none;
  color:#fafafa;
}

.nav_links > a:hover {
  color:#ED1250;
}

#nav_check, #nav_icon {
  display: none;
}

.resume{
  color:#ED1250;
  border-radius:4px;
  border:solid #ED1250 1px;
  padding:.5rem;
  margin-right:.5rem;
}

.resume:hover {
  background:rgb(237, 18, 80,.2);
  color:#fafafa;
}

.social{
  display:none;
}


@media (max-width:600px) {
 .navBar{
   height:3.3rem;
  }
  
.nav_btn {
    display: inline-block;
    float:right;
  }

#nav_icon{
  display:block;
  width: 60px;
  height: 45px;
  position: fixed;
  right:1rem;
  top:-3rem;
  margin: 50px auto;
  z-index:6;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  
  border:solid orange 2px;
}

  #nav_icon span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #fafafa;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav_icon span:nth-child(1) {
  top: 0px;
}

#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
  top: 18px;
}

#nav_icon span:nth-child(4) {
  top: 36px;
}

#nav_icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav_icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav_icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav_icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
  
.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display:none;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  text-transform:uppercase;
  font-weight:400;
  line-height:4.5rem;
  font-size:3rem;
  background:#0A2463;
} 

.menu_textWrapper{
    display:flex;
    flex-direction:column !important;
    width:18rem;
    background:#0A2463;
  }  

.links:hover::after{
  content:"»";
  font-size:2.5rem;
  }
  
#nav_check:not(:checked) ~ menu {
    display:none;
  }
  
.navBar > #nav_check:checked ~ .menu {
    display:flex;
    flex-direction:column;
  }
  
  
  
}/*closing bracket for media query*/
<div class="navBar">
  <input type="checkbox" id="nav_check">
  <div class="nav_btn">
    <label for="nav_check" class="hamburgerLines" id="nav_icon">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>
  <div class="menu">
   <div class="menu_textWrapper"> 
    <div class="nav_links">
      <a href="#about" class="links">About</a>
      <a href="#projects" class="links">Projects</a>
      <a href="#contact" class="links">Contact</a>
      <a href="/resume.pdf" target="_blank"><span class="resume">Resume</span></a>
    </div>
  </div>   
 </div>   
</div>

请使用：

[].forEach.call( document.querySelectorAll('a'), function(el) {
   // whatever with the current node
});
相关问题
最新问题