点击后删除类

Question

我为我的网站制作了一个切换菜单，对（汉堡切换按钮）菜单图标有一些影响。问题是，使用 javascript，我添加了一个“关闭”类，所以当我点击菜单图标时，它会转换为“X”（关闭）。当我单击菜单图标时，这非常有效。

但是，如果我单击切换菜单内容中的任何元素，“X”会保留。当我单击切换菜单中的任何元素（或切换菜单之外的任何地方）时，我应该怎么做/编码，以便类“关闭”再次消失（并显示常规的“汉堡”菜单图标而不是“X”） ，而不仅仅是当我点击“汉堡包”菜单图标时？

您可以查看我的网站 vlad095.github.io 并查看移动设备的切换菜单。这样你就可以明白我的意思了。看看当你点击菜单图标时它的行为，以及当你点击切换菜单内容元素或菜单外的任何地方时它的行为。

谢谢！

HTML:

      <!-- toggle button -->
      <button id="toggle-btn" onclick="toggleMenu()">
        <span class="line line1"></span>
            <span class="line line2"></span>
            <span class="line line3"></span>
      </button> <!-- end toggle button -->

      <div id="toggle-menu-display">
        <div class="toggle-menu-content">
          <a onclick="closeMenu()" href="#section1">ems training</a>
          <a onclick="closeMenu()" href="#section2">why ems?</a>
          <a onclick="closeMenu()" href="#section3">get started</a>
          <a onclick="closeMenu()" href="#section4">contact us</a>
          <a onclick="closeMenu()" href="index.html">norsk</a>
        </div>
      </div>
    </div> <!-- end toggle menu -->

CSS：

/* toggle menu */
#toggle-btn {
  background-color: transparent;
  float right;
  position: relative;
  top: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  }

  .line {
    position: absolute;
    right: 5%;
    width:100%;
    height: 2px;
    background: #fcfdfe;
    border-radius: 5px;
    transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
  }

  .line1 {top: 5px;}
  .line2 {top: 17px;}
  .line3 {top: 29px;}

  #toggle-btn.close .line1 {
    transform: rotate(45deg);
    top: 17px;
  }

  #toggle-btn.close .line2 {display: none;}

  #toggle-btn.close .line3 {
    transform: rotate(-45deg);
    top: 17px;
  }

  .toggle-menu {
    float: right;
    position: relative;
    position: relative;
    top: 0;
    right: 0;
    display: inline-block;
  }

  .toggle-menu-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    width: 100vw;
    margin-top: 40px;
  }

  .toggle-menu-content a {
    text-decoration: none;
    display: block;
    color: #4f4f4f;
    font-weight: bold;
    padding: 15px;
    border-bottom: 1px solid #ccc;
  }

  .toggle-menu-content a:first-child {border-top: 1px solid #ccc;}
  .toggle-menu-content a:last-child {padding-bottom: 16px;}

  .toggle-menu:hover .toggle-menu-content {display:block;}

  /*  nav_transform.js after class */
  .header.after .line {
    background-color: #4f4f4f;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
  }

JS：

 // Adding close class on-click
 $(document).ready(function() {
   $('#toggle-btn').click(function() {
     $('#toggle-btn').toggleClass('close');
   })
 })


 //Menu-toggle button functions
 function toggleMenu() {
   var menuBox = document.getElementById('toggle-menu-display');

   if (menuBox.style.display == "block") {
     menuBox.style.display = "none";
   } else {
     menuBox.style.display = "block";
   }
 }

 function closeMenu() {
   var menuBox = document.getElementById('toggle-menu-display');
   menuBox.style.display = "none";
 }

Answer 1

听起来您想使用mouseup event in jquery 和mousedown event in jquery。

你可以做的每一个：

$el.addClass("className")

还有：

$el.removeClass("className")

Answer 2

您已经在jQuery 中使用了正确的功能，您只需在toggle 之间添加您想要的classes

 // Adding close class on-click
 $(document).ready(function() {
   $('#toggle-btn').click(function() {
     //add both classes in toggleClass
     $('#toggle-btn').toggleClass('close open');
   })
 });

这将在.close 和.open 之间显示toggle，即当#toggle-btn 为.click 时显示关闭，并在再次单击时显示.open。

你可以添加

$('body').click(function() {
    $('#toggle-btn').removeClass('close');
});