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：我给了绝对菜单位置并添加了 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 你可以在这里看到它

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

添加到每个 <a class="navLink">（检查上面的 HTML）
将 id 添加到 manu 元素并切换元素 <ul class="menu" id="menu"> 和 <label for="drop" class="toggle" id="toggle">☰</label>
添加到您的 css .menu.open {display:block}
创建 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

点击链接后关闭下拉菜单

2 个答案: