javascript

Question

我正在尝试让汉堡包菜单在单击时打开 div 并在汉堡包处于 (X) 状态时在第二次单击时关闭。

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

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

未检测到。

是否有更简单的方法来执行此操作或使其在没有 stopPropagation 的情况下工作的解决方案？

$('#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();
})

.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 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>

http://jsfiddle.net/nzrvwfap/

Answer 1

如果您点击汉堡包的任何跨度并忽略它，您可以检查 body click。

$('#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 问题

javascript - stopPropagation issue when trying to detect second click on checkbox

html

css

menu

stoppropagation