单击导航项时关闭导航

Question

我的目标是在单击汉堡包菜单时关闭其中的菜单。截至目前，菜单仅使用html和css。

此导航栏与其他导航栏之间的区别在于，我的导航栏是通过输入复选框html元素创建的，我需要的是在单击汉堡包内部的链接时取消选中我的复选框。这应该关闭整个菜单，就像我单击汉堡包一样。另外，您能解释一下什么以及为什么javascript会做什么吗，我对javascript没有太多经验，谢谢。 ：）

我也使该复选框可见，以便我们可以更好地了解正在发生的事情。

我的CSS：

/* navigation menu */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  line-height: 70px;
  text-align: right;
  z-index: 10000;
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaeb;

}

.menu {
  margin: 0 30px 0 0;
}

/* link items */
.menu a {
  clear: right;
  line-height: 70px;
  text-decoration: none;
  margin: 0 10px;
  text-align: center;
  color: #33334d;
  background-color: #ffffff;
}

.menu a:hover {
  background-color: #c2c2d6;
}

/* hamburger properties */
label {
  float: right;
  display: none;
  width: 26px;
  line-height: 70px;
  margin: 0 40px 0 0;
  font-size: 36px;
}

/* checkbox */
#toggle {
}

@media only screen and (max-width: 1075px) {

/* hamburger properties */
  label {
    display: block;
    cursor: pointer;
  }

/* nav menu properties */
  .menu {
    width: 100%;
    display: none;
    text-align: center;
  }

/* link items */
  .menu a {
    display: block;
    margin: 0px;
    border-bottom: 1px solid #eaeaeb;
  }

/* makes links show when checkbox is checked */
  #toggle:checked + .menu {
    display: block;
  }
}


My HTML:

  <div class="nav">
      <label for="toggle">&#9776;</label>
      <input type="checkbox" id="toggle"/>
      <div class="menu">
        <a href="#">example</a>
        <a href="#">example</a>
        <a href="#">example</a>
        <a href="#">example</a>
        <a href="#">example</a>
        <a href="#">example</a>
        <a href="#">example</a>
      </div>
    </div>

Answer 1

实际上可能不需要脚本，具体取决于您的需求。

如果为包含导航链接的div提供ID，则可以使用a标签（将href设置为ID）作为目标。然后，您可以使用:target选择器来更改导航div的可见性。

/* navigation menu */

.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  line-height: 70px;
  text-align: right;
  z-index: 10000;
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaeb;
}

.menu {
  margin: 0 30px 0 0;
}


/* link items */

.menu a {
  clear: right;
  line-height: 70px;
  text-decoration: none;
  margin: 0 10px;
  text-align: center;
  color: #33334d;
  background-color: #ffffff;
}

.toggle {
  text-decoration: none;
  color: #33334d;
}

.menu a:hover {
  background-color: #c2c2d6;
}


/* hamburger properties */

.toggle,
label {
  float: right;
  display: none;
  width: 26px;
  line-height: 70px;
  margin: 0 40px 0 0;
  font-size: 36px;
}


/* checkbox */

#toggle {}

@media only screen and (max-width: 1075px) {
  /* hamburger properties */
  .toggle,
  label {
    display: block;
    cursor: pointer;
  }
  /* nav menu properties */
  .menu {
    width: 100%;
    display: none;
    text-align: center;
  }
  /* link items */
  .menu a {
    display: block;
    margin: 0px;
    border-bottom: 1px solid #eaeaeb;
  }
  /* makes links show when checkbox is checked */
  #menu:target,
  #toggle:checked+.menu {
    display: block;
  }
}

<div class="nav">
  <a class="toggle" href="#menu">&#9776;</a>

  <div class="menu" id="menu">
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
  </div>
</div>

Answer 2

哇，有趣。这是一种非常奇怪的做法，但是可以使用。您可以通过选中输入来使菜单显示/隐藏。很有意思。我从没想过那样。

但是您还需要一段JS代码。

通过CSS，您可以处理一些基本的选择器，例如：hover，：focus，：active等。在您的情况下，您还会创建一些有趣的click事件。但是，复选框不用于此目的。

点击和其他事件由JS处理（更多https://www.w3schools.com/js/js_events.asp）。

因此，在本例中，我们选择所有链接：

var links = document.querySelectorAll('.menu a');

然后，我们必须在每个链接中添加click事件，这会将我们的输入设置为checked="false" =关闭菜单。

仅当呈现选定的链接时，此JS代码才起作用，因此您需要将此代码段放在</body>之前的html文件末尾，或使用window.onload ...

var links = document.querySelectorAll('.menu a');
var linksLength = links.length

for(var i = 0; i < linksLength; i++) {
  links[i].addEventListener('click', function() {
    document.getElementById('toggle').checked = false;
  });
}

/* navigation menu */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  line-height: 70px;
  text-align: right;
  z-index: 10000;
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaeb;

}

.menu {
  margin: 0 30px 0 0;
}

/* link items */
.menu a {
  clear: right;
  line-height: 70px;
  text-decoration: none;
  margin: 0 10px;
  text-align: center;
  color: #33334d;
  background-color: #ffffff;
}

.menu a:hover {
  background-color: #c2c2d6;
}

/* hamburger properties */
label {
  float: right;
  display: none;
  width: 26px;
  line-height: 70px;
  margin: 0 40px 0 0;
  font-size: 36px;
}

/* checkbox */
#toggle {
}

@media only screen and (max-width: 1075px) {

/* hamburger properties */
  label {
    display: block;
    cursor: pointer;
  }

/* nav menu properties */
  .menu {
    width: 100%;
    display: none;
    text-align: center;
  }

/* link items */
  .menu a {
    display: block;
    margin: 0px;
    border-bottom: 1px solid #eaeaeb;
  }

/* makes links show when checkbox is checked */
  #toggle {
    display: none;
  }
  #toggle:checked + .menu {
    display: block;
  }
}

<label class="nav" for="toggle">
  <div class="icon">&#9776;</div>
  <input type="checkbox" id="toggle"/>
  <div class="menu">
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
    <a href="#">example</a>
  </div>
</label>