Question

我创建了一个可折叠菜单，我希望在用户单击身体时将其关闭。我已经对其进行了编码，但是每次刷新它只能工作一次。我的意思是，当我单击菜单按钮时它会打开，而在单击主体时它会很好地关闭，但是如果我想重新打开菜单，则按钮不会执行任何操作。

我尝试使用addclass而不是toggleclass，但是它不起作用。甚至我尝试使用toggleClass而不是removeClass，但发生了更糟的事情，每次我单击BODY时，菜单都会打开和关闭。

怎么了？

$(window).click(function() {
  "use strict";
  $("HTML, body").click(function() {
    $(".menu").removeClass("menu_slide");
  });
});

$(document).ready(function() {
  "use strict";
  $(".menu_button").click(function() {
    $(".menu").toggleClass("menu_slide");
  });
});

.menu_button {
  position: fixed;
  cursor: pointer;
  color: #727272;
  /*margin-top: -10vw;*/
  margin-left: 3vw;
  margin-top: 3vw;
  text-shadow: 2px 1.5px 2px #0C0C0C;
  z-index: 200;
}

.slash {
  font-family: 'Montserrat-Medium';
  font-size: 4vw;
  letter-spacing: 0.5vw;
  text-shadow: 2px 1.5px 2px #0C0C0C;
  z-index: 200;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.menu {
  width: 50vw;
  height: 100vh;
  background-color: #D1D1D1;
  z-index: 10;
  position: fixed;
  left: -50vw;
  top: 0vh;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}

.menu_slide {
  left: 0vw;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}

.menu ul {
  position: absolute;
  left: 20vw;
  top: 18vw;
}

.menu ul li {
  font-family: 'Montserrat-Light';
  font-size: 1.5vw;
  line-height: 2vw;
  letter-spacing: 0.3vw;
  color: #1C1C1C;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu_button">
  <div class="slash">///</div>
</div>
<div class="menu">
  <ul>
    <li>About /</li>
    <li>CV /</li>
    <li>Photos /</li>
    <li>Videos /</li>
    <li>Contact /</li>
  </ul>
</div>

Answer 1

问题是因为对.menu元素的点击一直传播到body，在这里您刚刚添加的类被立即删除。您在window.click中的嵌套事件处理程序正在执行类似的工作，因此通常应避免使用嵌套事件处理程序。

要解决此问题，您需要向菜单的父元素添加stopPropagation()调用。您还应该仅在document上直接附加单击处理程序，该菜单项将隐藏菜单。试试这个：

$(document).click(function() {
  $(".menu").removeClass("menu_slide");
});

$(document).ready(function() {
  $(".menu_button").click(function() {
    $(".menu").toggleClass("menu_slide");
  });
  
  $('.menu-container').on('click', function(e) {
    e.stopPropagation();
  });
});

.menu_button {
  position: fixed;
  cursor: pointer;
  color: #727272;
  /*margin-top: -10vw;*/
  margin-left: 3vw;
  margin-top: 3vw;
  text-shadow: 2px 1.5px 2px #0C0C0C;
  z-index: 200;
}

.slash {
  font-family: 'Montserrat-Medium';
  font-size: 4vw;
  letter-spacing: 0.5vw;
  text-shadow: 2px 1.5px 2px #0C0C0C;
  z-index: 200;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.menu {
  width: 50vw;
  height: 100vh;
  background-color: #D1D1D1;
  z-index: 10;
  position: fixed;
  left: -50vw;
  top: 0vh;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}

.menu_slide {
  left: 0vw;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}

.menu ul {
  position: absolute;
  left: 20vw;
  top: 18vw;
}

.menu ul li {
  font-family: 'Montserrat-Light';
  font-size: 1.5vw;
  line-height: 2vw;
  letter-spacing: 0.3vw;
  color: #1C1C1C;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-container">
  <div class="menu_button">
    <div class="slash">///</div>
  </div>
  <div class="menu">
    <ul>
      <li>About /</li>
      <li>CV /</li>
      <li>Photos /</li>
      <li>Videos /</li>
      <li>Contact /</li>
    </ul>
  </div>
</div>

菜单在外部单击时关闭，但仅打开一次

1 个答案: