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的声音。

在每种情况下您都可以这样做：

js

并且：

{
    "compilerOptions": {
        ...
        "allowJs": true,
        "outDir": "./build/",
        ...
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "**/*.spec.ts"]
}

Answer 2

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

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

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

您可以添加

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

点击后删除课程

2 个答案: