javascript - 单击后删除类

Question

我为我的网站制作了一个切换菜单，对(汉堡切换按钮)菜单图标有一些影响。问题是，使用 javascript，我添加了一个“close”类，因此当我单击菜单图标时，它会转换为“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")