点击链接后关闭下拉菜单

Question

我有一个几乎完整的下拉菜单，只有 1 个我无法弄清楚的错误/问题。 我的导航链接到主页上的不同区域。 因此，在主页上，用户可以单击导航链接，该链接会立即将他们带到页面上所需的位置。

我的问题出现在用户单击导航链接时，他们被带到该位置，但下拉菜单不会关闭。

除此之外，我还想从上到下为我的菜单设置动画，让它看起来更优雅。 我尝试了很多东西，但我似乎无法让它发挥作用.. 希望你能帮助我！

 .toggle, [id^=drop] { display: none; } nav { margin:0; padding: 0; float: center; position: absolute; z-index: 400; border: solid 0px; } nav ul { float: center; position: relative; width: 100vw; }.menu{ background: rgb(233, 233, 233); background: linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%); background: -webkit-linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%); } nav ul li { text-align: center; position: relative; margin: 0px; display:left; } nav a { font-family: 'OggR'; color: black; font-size:14px; text-decoration:none; position: relative; text-align: center; transition: 0.3s; }.toggle + a, .menu { display: none; }.toggle { position: fixed; display: block; padding:4px 20px; color: rgb(233, 233, 233); font-size:20px; text-decoration:none; width: 20px; height: 30px; z-index: 9999999999999999999; }

 <nav> <label for="drop" class="toggle">&#x2630;</label> <input type="checkbox" id="drop" /> <ul class="menu"> <li> <li><a href="#abstract">ABSTRACT</a></li> <li><a href="#introduction">INTRODUCTION</a></li> <li><a href="#chapterI">I. <br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</a></li> <li><a href="#chapterII">II. <br>CONTEMPORARY NOSTALGIA</a></li> <li><a href="#chapterIII">III. <br>THE TWO FACES OF NOSTALGIA</a></li> <li><a href="#conclusion">CONCLUSION</a></li> <li><a href="#bibliography">BIBLIOGRAPHY</a></li> </ul> </nav>

Answer 1

html。 我添加了 ID：

<nav>
      <label for="drop" class="toggle" id="toggle">&#x2630;</label>
      <input type="checkbox" id="drop" />
          <ul class="menu" id="menu">
              <li>
              <li><a class="navLink" href="#abstract">ABSTRACT</a></li>
              <li><a class="navLink" href="#introduction">INTRODUCTION</a></li>
              <li><a class="navLink" href="#chapterI">I. <br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</a></li>
              <li><a class="navLink" href="#chapterII">II. <br>CONTEMPORARY NOSTALGIA</a></li>
              <li><a class="navLink" href="#chapterIII">III. <br>THE TWO FACES OF NOSTALGIA</a></li>
              <li><a class="navLink" href="#conclusion">CONCLUSION</a></li>
              <li><a class="navLink" href="#bibliography">BIBLIOGRAPHY</a></li>
          </ul>
    </nav>

css: i gave menu postion absolute and i added top: -100% to make it "dissapear", i deleted the position of nav, i added class.menu.open to handle the open, i added transition to.menu for the animation .

.toggle,
[id^=drop] {
    display: none;
}

nav {
    margin:0;
    padding: 0;
  float: center;
  z-index: 400;
  border: solid 0px;
}

nav ul {
float: center;
    position: relative;
  width: 100vw;
    }
.menu{
  position:absolute;
  top:-100%;
  background: rgb(233, 233, 233);
  background: linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
  background: -webkit-linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
  transition: 0.3s ease-in;
}
.menu.open{
  top:30px;
}
nav ul li {
  text-align: center;
  position: relative;
    margin: 0px;
    display:left;
    }

nav a {
  font-family: 'OggR';
    color: black;
    font-size:14px;
    text-decoration:none;
  position: relative;
  text-align: center;
  transition: 0.3s;
}

    

    .toggle {
      cursor:pointer;
    position: fixed;
        display: block;
        padding:4px 20px;
        color:black;
        font-size:20px;
        text-decoration:none;
    width: 20px;
    height: 30px;
    z-index: 9999999999999999999;
    }

这是js：

//adding the click event to the toggle
let menu = document.getElementById('menu')
let toggle = document.getElementById('toggle')
let links = document.getElementsByClassName('link')

for(let i = 0; i < links.length; i++){
  links[i].addEventListener('click', () => {
    menu.classList.remove('open')
    toggle.innerHTML = '&#x2630'
  })
}


document.getElementById('toggle').addEventListener('click', () => {
  
  if(menu.classList.contains('open')){
    menu.classList.remove('open')
    toggle.innerHTML = '&#x2630'
  } else {
    menu.classList.add('open')
    toggle.innerHTML = 'X'
  }
})

编辑：我添加了 class 到我循环它们并在点击每个链接时给出事件，所以当你点击它时它会关闭导航。

现在检查代码笔https://codepen.io/Elnatan/pen/PoGyXwx你可以在这里看到

---

为了能够在您的页面中实现它：

1. 添加到每个<a class="navLink"> （检查上面的 HTML）
2. 将 id 添加到 manu 元素并切换元素<ul class="menu" id="menu">和<label for="drop" class="toggle" id="toggle">&#x2630;</label>
3. 添加到您的 css .menu.open {display:block}
4. 创建 navHandler.js 文件并将其添加到您的 HTML ``` 5.复制此代码并将其粘贴到您的 navHandler.js 文件中：

let menu = document.getElementById('menu')
let toggle = document.getElementById('toggle')
let links = document.getElementsByClassName('navLink')

for(let i = 0; i < links.length; i++){
  links[i].addEventListener('click', () => {
    menu.classList.remove('open')
  })
}

如果您正确按照步骤操作，它应该可以工作

Answer 2

不需要 javascript，只需将其添加到您的 css 中：

#drop:checked + .menu {
  display: block;
}

代码笔： https://codepen.io/manaskhandelwal1/pen/poExqJv