点击链接

Question

我正在制作一个汉堡菜单，当点击汉堡包图标（点击时将其设置为十字架动画）时，叠加菜单div会填满屏幕。

我希望汉堡包在隐藏叠加div的同时点击任何菜单链接时更改回原来的状态。

在菜单链接中有一种简单的方法可以实现吗？

＆＃13;

＆＃13;

function funcToggle() {
  $("#Overlay").toggle("slow");
}

function funcHide() {
  $("#Overlay").toggle("slow");
}

document.querySelector("#nav-toggle")
  .addEventListener("click", function() {
    this.classList.toggle("active");
  });

＆＃13;

#nav-toggle span {
  position: absolute;
  margin-top: 10px;
}

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 4px;
  height: 3px;
  width: 18px;
  background: #1098fe;
  position: absolute;
  display: block;
  content: '';
}

#nav-toggle span:before {
  top: -5px;
}

#nav-toggle span:after {
  bottom: -5px;
}

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  transition: all 500ms ease-in-out;
}

#nav-toggle.active span {
  background-color: transparent;
}

#nav-toggle.active span:before,
#nav-toggle.active span:after {
  top: 0;
}

#nav-toggle.active span:before {
  transform: rotate(45deg);
  background: #fe0000;
}

#nav-toggle.active span:after {
  transform: rotate(-45deg);
  background: #fe0000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show" class="show">
  <nav>
    <a id="nav-toggle" href="#" onclick="funcToggle()"><span></span></a>
  </nav>
</div>
<div id="Overlay" name="Overlay" class="overlay">
  <ul class="hamburger_menu">
    <li><a href="#top" onclick="funcHide()">TOP</a></li>
    <li><a href="#newsletter" onclick="funcHide()">NEWSLETTER</a></li>
    <li><a href="#videos" onclick="funcHide()">VIDEOS</a></li>
    <li><a href="#contact" onclick="funcHide()">CONTACT</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不要混合jQuery / JS，坚持一个。

// cache DOM elements as jquery objects
// adding $ to jquery objects is a good practice
var $overlay = $('#overlay'),
    $nav = $('#nav-toggle'),
    $links = $('#overlay a');

// descriptive names
function funcToggleNav() {
  $overlay.toggle("slow");
}

function funcToggleBurger () {
  $nav.toggleClass("active");
}

$nav.on("click", function () {
  funcToggleBurger();
  funcToggleNav();
});

$links.on("click", function () {
  funcToggleBurger();
  funcToggleNav();
})

示例：jsbin

Answer 2

您可以使用解决方案https://jsfiddle.net/2jys1dhs/

$('ul.hamburger_menu li a').click(function(){
  $("#Overlay").toggle("slow");
  $('a#nav-toggle').removeClass('active');
});

$("#nav-toggle").on("click", function() {
  $(this).toggleClass("active");
  $("#Overlay").toggle("slow");
});

#nav-toggle span {
  position: absolute;
  margin-top: 10px;
}

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 4px;
  height: 3px;
  width: 18px;
  background: #1098fe;
  position: absolute;
  display: block;
  content: '';
}

#nav-toggle span:before {
  top: -5px;
}

#nav-toggle span:after {
  bottom: -5px;
}

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  transition: all 500ms ease-in-out;
}

#nav-toggle.active span {
  background-color: transparent;
}

#nav-toggle.active span:before,
#nav-toggle.active span:after {
  top: 0;
}

#nav-toggle.active span:before {
  transform: rotate(45deg);
  background: #fe0000;
}

#nav-toggle.active span:after {
  transform: rotate(-45deg);
  background: #fe0000;
}

.overlay{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show" class="show">
  <nav>
    <a id="nav-toggle" href="#"><span></span></a>
  </nav>
</div>
<div id="Overlay" name="Overlay" class="overlay" >
  <ul class="hamburger_menu">
    <li><a href="#top">TOP</a></li>
    <li><a href="#newsletter">NEWSLETTER</a></li>
    <li><a href="#videos">VIDEOS</a></li>
    <li><a href="#contact">CONTACT</a></li>
  </ul>
</div>

我使用了jQuery点击事件而不是HTML onclick方法。 对于初始隐藏，请使用CSS display:none;属性。

希望这会对你有所帮助。