Question

我试图让汉堡菜单在点击时打开div，在汉堡包处于（X）状态时第二次点击时关闭。

我已添加代码，允许用户在点击打开的div时也关闭汉堡包。然而，stopPropagation会阻止汉堡包被点击两次，我相信

else {
    $(".NavMenu").hide();
 }

没有被发现。

是否有更简单的方法可以执行此操作或解决方案，让它在没有stopPropagation的情况下运行？

＆＃13;

$('#burger').click(function(event) {
  event.stopPropagation();
  if ($(this).is(':checked')) {
    $(".NavMenu").show();
  } else {
    $(".NavMenu").hide();
  }
});

$('body').click(function() {
  if ($('#burger').is(':checked')) {
    $(".NavMenu").hide();
    $("#burger").prop("checked", false);
  }
})

$('.NavMenu').click(function(event) {
  event.stopPropagation();
})

＆＃13;

.mobileMenu {
  display: block;
  width: 30px;
  height: 70px;
  float: left;
}

.NavMenu {
  display: none;
  position: absolute;
  width: 100%;
  height: 50px;
  top: 70px;
  background-color: #FFF;
  margin-left: -15px;
  padding: 15px;
  border-bottom: 1px solid #CCC;
}

input+label {
  position: fixed;
  top: 26px;
  left: 30px;
  height: 20px;
  width: 15px;
  z-index: 5;
}

input+label span {
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  margin-top: -1px;
  left: 0;
  display: block;
  background: #020304;
  transition: .5s;
}

input+label span:first-child {
  top: 3px;
}

input+label span:last-child {
  top: 16px;
}

label:hover {
  cursor: pointer;
}

input:checked+label span {
  opacity: 0;
  top: 50%;
}

input:checked+label span:first-child {
  opacity: 1;
  transform: rotate(405deg);
}

input:checked+label span:last-child {
  opacity: 1;
  transform: rotate(-405deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="burger" type="checkbox" style="display:none;" />

<label for="burger">
    <span></span>
    <span></span>
    <span></span>
</label>
<div class="NavMenu">
  <a href="https://google.com" target="_blank">Check accessibility</a>
</div>


<div style="margin-top:70px;height: 500px; background-color:#F00;">

</div>

＆＃13;

http://jsfiddle.net/nzrvwfap/

Answer 1

如果您点击汉堡包的任何范围并忽略它，您可以检查身体点击。

$('#burger').click(function(event) {
  event.stopPropagation();
  if ($(this).is(':checked')) {
    $(".NavMenu").show();
  } else {
    $(".NavMenu").hide();
  }
});

$('body').click(function(e) {
  if ($(e.target).is($('.hamburger-trigger span'))) {
    return;
  }
  if ($('#burger').is(':checked')) {
    $(".NavMenu").hide();
    $("#burger").prop("checked", false);
  }
})

$('.NavMenu').click(function(event) {
  event.stopPropagation();
})

.mobileMenu {
  display: block;
  width: 30px;
  height: 70px;
  float: left;
}

.NavMenu {
  display: none;
  position: absolute;
  width: 100%;
  height: 50px;
  top: 70px;
  background-color: #FFF;
  margin-left: -15px;
  padding: 15px;
  border-bottom: 1px solid #CCC;
}

input+label {
  position: fixed;
  top: 26px;
  left: 30px;
  height: 20px;
  width: 15px;
  z-index: 5;
}

input+label span {
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  margin-top: -1px;
  left: 0;
  display: block;
  background: #020304;
  transition: .5s;
}

input+label span:first-child {
  top: 3px;
}

input+label span:last-child {
  top: 16px;
}

label:hover {
  cursor: pointer;
}

input:checked+label span {
  opacity: 0;
  top: 50%;
}

input:checked+label span:first-child {
  opacity: 1;
  transform: rotate(405deg);
}

input:checked+label span:last-child {
  opacity: 1;
  transform: rotate(-405deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="burger" type="checkbox" style="display:none;" />

<label class="hamburger-trigger" for="burger">
    <span></span>
    <span></span>
    <span></span>
</label>
<div class="NavMenu">
  <a href="https://google.com" target="_blank">Check accessibility</a>
</div>


<div style="margin-top:70px;height: 500px; background-color:#F00;">

</div>

重要

但是，如果您使用复选框，我建议您仅使用~选择器尝试使用css。

.mobileMenu { display: block; width: 30px; height: 70px; float: left; } .NavMenu { display: none; position: absolute; width: 100%; height: 50px; top: 70px; background-color: #FFF; margin-left: -15px; padding: 15px; border-bottom: 1px solid #CCC; } /* add this */ #burger:checked ~ .NavMenu { display: block; } input+label { position: fixed; top: 26px; left: 30px; height: 20px; width: 15px; z-index: 5; } input+label span { position: absolute; width: 100%; height: 2px; top: 50%; margin-top: -1px; left: 0; display: block; background: #020304; transition: .5s; } input+label span:first-child { top: 3px; } input+label span:last-child { top: 16px; } label:hover { cursor: pointer; } input:checked+label span { opacity: 0; top: 50%; } input:checked+label span:first-child { opacity: 1; transform: rotate(405deg); } input:checked+label span:last-child { opacity: 1; transform: rotate(-405deg); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="burger" type="checkbox" style="display:none;" /> <label class="hamburger-trigger" for="burger"> <span></span> <span></span> <span></span> </label> <div class="NavMenu"> <a href="https://google.com" target="_blank">Check accessibility</a> </div> <div style="margin-top:70px;height: 500px; background-color:#F00;"> </div>

Answer 2

要允许它再次打开，只需更改行：

$('body').click(function() {

到

$('body').not('#burger').click(function() {

javascript - 尝试检测第二次单击复选框时的stopPropagation问题

2 个答案: