javascript - 汉堡菜单下拉低宽度

Question

我的导航栏只有很少的元素，汉堡图标应该以低宽度显示，此时导航栏元素应该隐藏。我想通过按钮将它们的显示更改为 bo flex 并将 flex-direction 设置为 column，这样元素将垂直显示。我正在尝试使用这个功能，你能给我一些建议吗？

代码如下:

let btn = document.getElementById('btn');
let menu = document.getElementsByClassName('hammburger-links')[0];


btn.addEventListener('click', function() {
    menu.classList.toggle('openmenu');
});

.slider .hammburger-menu {
  width: 16px;
  height: 14px;
  border: 0;
  display: none;
  position: absolute;
}

@media (max-width: 1425px) {
  .slider .hammburger-menu {
    display: inline;
  }
  .slider .hammburger-menu div {
    background-color: #202124;
    display: block;
    width: 16px;
    height: 2px;
    margin: 4px 0;
  }
}

.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;
  position: relative;
}

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

@media (max-width: 1425px) {
  .slider .hammburger-links a {
    display: none;
  }
}

.slider .hammburger-links .under-home {
  position: absolute;
  top: 2.5em;
  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;
}

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

.slider .hammburger-links.openhome {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.slider .hammburger-links.openmenu a {
  display: flex;
  flex-direction: column;
}

<div class="slider">
            <div class="hammburger-menu" id="btn">
                <div class="one"></div>
                <div class="two"></div>
                <div class="three"></div>
            </div>
            <div class="hammburger-links" id="menu">
                <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>

Answer 1

document.getElementsByClassName 返回一个数组。所以你想做 let menu = document.getElementsByClassName('hamburger-links')[0]; 或通过 id(菜单)获取元素。

这样做应该将所需的类添加到#menu 元素，但您的 CSS 也有问题。您的 CSS 选择器 .slider .hammburger-links .openmenu 没有选择任何内容。该选择器查找元素 .openmenu，它是元素 .hamburger-links 的后代，即元素 .slider 的后代。您需要属于 hammburger-links 和 openmenu 类的元素。选择器如下所示:.slider .hammburger-links.openmenu

但是，这仍然没有显示菜单元素。我发现再次更改选择器以定位子 anchor 元素 (.slider .hamburger-links.openmenu a) 可以解决问题，但您可能希望根据您的实现方式采取不同的做法