时间戳

首页 > 解决方案 > 单击导航项时关闭导航

javascript - 单击导航项时关闭导航

问题描述

我的目标是让我的汉堡菜单在单击其中的项目时关闭。截至目前，菜单仅使用 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>

标签： javascripthtmlcss

解决方案

根据您的需要，实际上可能不需要 JavaScript。

如果您为包含导航链接的 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>

推荐阅读