菜单下拉单击其中一个菜单项

Question

我想用js函数制作一个下拉菜单，点击其中一个菜单项。我试图通过下面的功能实现这一点，但它无法正常工作。你能告诉我我的错误在哪里吗？我想使用纯javascript，如果它改变了某些东西我正在使用SASS。

这是代码：

let home = document.getElementById('home');
let underhome = document.querySelector('under-home');

home.addEventListener('click', function() {
  underhome.classList.toggle('open');
});

.navbar .slider .hammburger-links {
  padding: 0 1.250em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.navbar .slider .hammburger-links a {
  padding: 0 1.500em;
  text-decoration: none;
  font-family: "Helvetica", Arial;
  font-size: 11px;
  color: #a6adb4;
}

.navbar .slider .hammburger-links .under-home {
  position: absolute;
  top: 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background: #F6F8F9;
  min-width: 12.5em;
  min-height: 12.5em;
  z-index: 1;
  display: none;
}

.navbar .slider .hammburger-links .under-home a {
  margin: 10px 0;
}

.navbar .slider .hammburger-links .open {
  display: inline;

<div class="navbar">
  <div class="slider">
    <div class="hammburger-links">
      <a href="" id="home">HOME</a>
      <div class="under-home">
        <a href="">WORLD NEWS</a>
        <a href="">TRAVEL</a>
        <a href="">TECHNOLOGY</a>
        <a href="">CITY</a>
        <a href="">CULTURE</a>
        <a href="">MORE...</a>
      </div>
      <a href="">DISCOVERY</a>
      <a href="">PHOTOS</a>
      <a href="">CONTACT</a>
      <img src="images/navbar-img.png" alt="">
    </div>
  </div>
</div>

Answer 1

有很多变化 - 主要解释如下：

• 首先添加了你的片段中缺少的navbar包装器，你的.querySelector('under-home')缺少.（类选择器），
• 将position: relative添加到.hammburger-links，以便子菜单绝对相对于此元素定位，
• 在eventListener中添加了e.preventDefault()，以便禁用单击超链接的默认操作（我们希望菜单在此处切换），
• 在.open使用display: flex而不是display: inline，

见下面的演示：

let home = document.getElementById('home');
let underhome = document.querySelector('.under-home');

home.addEventListener('click', function(e) {
  e.preventDefault(); /* prevent default hyperlink action */
  underhome.classList.toggle('open');
});

.navbar .slider .hammburger-links {
  padding: 0 1.250em;
  display: flex;
  align-items: center;
  position: relative; /* added */
}

.navbar .slider .hammburger-links a {
  padding: 0 1.500em;
  text-decoration: none;
  font-family: "Helvetica", Arial;
  font-size: 11px;
  color: #a6adb4;
}

.navbar .slider .hammburger-links .under-home {
  position: absolute;
  top: 1.5em; /* adjusted */
  display: flex;
  flex-direction: column;
  background: #F6F8F9;
  min-width: 12.5em;
  min-height: 12.5em;
  z-index: 1;
  display: none;
}

.navbar .slider .hammburger-links .under-home a {
  margin: 10px 0;
}

.navbar .slider .hammburger-links .open {
  display: flex; /* changed */
}

<div class="navbar">
  <div class="slider">
    <div class="hammburger-links">
      <a href="" id="home">HOME</a>
      <div class="under-home">
        <a href="">WORLD NEWS</a>
        <a href="">TRAVEL</a>
        <a href="">TECHNOLOGY</a>
        <a href="">CITY</a>
        <a href="">CULTURE</a>
        <a href="">MORE...</a>
      </div>
      <a href="">DISCOVERY</a>
      <a href="">PHOTOS</a>
      <a href="">CONTACT</a>
      <img src="https://via.placeholder.it/200" alt="">
    </div>
  </div>
</div>

Answer 2

试试这个

let home = document.getElementById('home');

home.addEventListener('click', function() {
 var element =  document.getElementById('under_home');
   element.classList.toggle("open");

});

.navbar .slider .hammburger-links {
  padding: 0 1.250em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar .slider .hammburger-links a {
  padding: 0 1.500em;
  text-decoration: none;
  font-family: "Helvetica", Arial;
  font-size: 11px;
  color: #a6adb4;
}

.navbar .slider .hammburger-links .under-home {
  position: absolute;
  top: 14%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #F6F8F9;
  min-width: 12.5em;
  min-height: 12.5em;
  z-index: 1;
  display: none;
}

.navbar .slider .hammburger-links .under-home a {
  margin: 10px 0;
}

.navbar .slider .hammburger-links .open {
  display: inline;
  }

<div class="navbar">
<div class="slider">
            <div class="hammburger-links">
                <a href="" id="home">HOME</a>
                <div class="under-home" id="under_home">
                    <a href="">WORLD NEWS</a>
                    <a href="">TRAVEL</a>
                    <a href="">TECHNOLOGY</a>
                    <a href="">CITY</a>
                    <a href="">CULTURE</a>
                    <a href="">MORE...</a>
                </div>
                <a href="">DISCOVERY</a>
                <a href="">PHOTOS</a>
                <a href="">CONTACT</a>
                <img src="images/navbar-img.png" alt="">
            </div>
        </div>
        </div>