点击链接后关闭下拉菜单

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

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

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

Codepen：https://codepen.io/manaskhandelwal1/pen/poExqJv

Answer 2

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：我给了绝对菜单位置，我添加了 top:-100% 使其“消失”，我删除了导航的位置，我添加了类 .menu.open 来处理打开，我添加了到 .menu 的过渡用于动画。

.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'
  }
})

编辑： 我在其中添加了类，然后循环遍历它们并在单击每个链接时提供事件，因此当您单击它时将关闭导航。

现在检查代码笔 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">☰</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')
  })
}

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