单击菜单外的任意位置以关闭菜单

【问题标题】：Click anywhere outside of menu to close menu单击菜单外的任意位置以关闭菜单
【发布时间】：2021-08-03 14:37:13
【问题描述】：

即使在这里阅读了大约 20 个相关问题/主题后，我还是无法弄清楚这一点，尝试了好几个小时但还是无法得到它，所以真的希望有人能让我摆脱痛苦！

我有一个滑出式菜单，目前需要用户单击“X”来关闭它，我需要让用户能够单击菜单之外的任何地方或“X”来关闭它。

我创建了一个codepen 以便更容易查看代码，因为代码很多。

jQuery(document).ready(function($){
    $('.btn-open-menu').click(function () {
        $('header').addClass('open');
     $('html').addClass('open');
      $('html, body').addClass('noscroll');

    });

    $('.link-menu').click(function () {
        $('header').removeClass('open');
      $('html').removeClass('open');
      $('html, body').removeClass('noscroll');
      
    });

    $('.btn-close-menu').click(function () {
        $('header').removeClass('open');
     $('html').removeClass('open');
      $('html, body').removeClass('noscroll');
      
    });
  
      $('.btn-open-menu2').click(function () {
        $('header').addClass('open');
     $('html').addClass('open');
        $('html, body').addClass('noscroll');
    });

    $('.link-menu').click(function () {
        $('header').removeClass('open');
      $('html').removeClass('open');
      $('html, body').removeClass('noscroll');
      
    });

    $('.btn-close-menu2').click(function () {
        $('header').removeClass('open');
     $('html').removeClass('open');
      $('html, body').removeClass('noscroll');
      
    });



});
 header {
     width: 100%;
     
     background-color: transparent;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 10;
     transition: 0.5s ease-in-out;
}


 header .btn-open-menu {
     width: 25px;
     height: 25px;
     position: absolute;
     top: 50px;
     right: 50px;
     cursor: pointer;
}

@media only screen and (max-width: 767px) {
    header .btn-open-menu {
     top: 25px;
     right: 20px;
}
}

@media only screen and (max-width: 767px) {
     header .header-content {
     width: 100% !important;
     }
}
 header .header-content {
     width: 30%;
     height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
     background-color: #FB4D98;
     box-sizing: border-box;
     position: absolute;
     top: 0;
         left:initial; right: -100%;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     align-content: center;
     transition: 0.8s ease-in-out;
}


@media only screen and (max-width: 767px) {
     header .header-content .btn-close-menu {
     top: 20px !important;
     right: 20px !important;
     }
}

 header .header-content .btn-close-menu {
     width: 25px;
     height: 25px;
     position: absolute;
     top: 50px;
     right: 50px;
     cursor: pointer;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     flex-direction: row;
     align-content: center;
}
 header .header-content .btn-close-menu:before, header .header-content .btn-close-menu:after {
     background: #F4FB82;
     content: '';
     display: block;
     width: 100%;
     height: 4px;
     position: absolute;
     transition: 0.5s ease-in-out;
}
 header .header-content .btn-close-menu:before {
     transform: rotate(45deg);
}

 header .header-content .btn-close-menu:hover{
     transform: rotate(180deg);
     transition:0.5s ease-in-out;
     
}

 header .header-content .btn-close-menu:after {
     transform: rotate(-45deg);
}

 header .header-content nav {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     align-content: center;
}
 header .header-content nav a {
     color: #000;
     letter-spacing: 0.5px;
     line-height: 35px;
     text-decoration: none;
     transition: 0.5s;
}
 header .header-content nav a:hover {
     color: rgba(0, 0, 0, 0.5);
     transition: 1s;
}
 header .header-content .social {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 40px 0 0 0;
     font-size: 20px;
}
 header .header-content .social a {
     color: #000;
     text-decoration: none;
     margin: 0 10px;
     transition: 0.5s;
}
 header .header-content .social a:hover {
     color: #F4FB82;
     transform: scale(1.5);
     transition: 0.5s;
}


 header.open {
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.5);
     transition: 0.5s ease-in-out;
}
 header.open .btn-open-menu, header.open .logo {
     opacity: 0;
     transition: 1s ease-in-out;
}
 header.open .header-content {
     left:initial; right: 0;
     transition: 0.8s ease-in-out;
}

 .Menu-list {
     font-family: "alliance";
     font-size: 4vw;
     line-height: 1.2;
     text-transform: uppercase;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
}

@media only screen and (max-width: 767px) {
     .Menu-list {
     font-family: "alliance";
     font-size: 12vw;
     }
}
 .Menu-list-item {
     position: relative;
     color: transparent;
     cursor: pointer;
}

 ul.Menu-list{
     padding-inline-start: 0px !important;
     
 }
 .Menu-list-item::before {
     content: '';
     display: block;
     position: absolute;
     top: 49%;
     left: -10%;
     right: -10%;
     height: 4px;
     border-radius: 4px;
     margin-top: -2px;
     background: #F4FB82;
     transform: scale(0);

     z-index: 1;
}
  .Mask {
     display: block;
     position: absolute;
     overflow: hidden;
     padding-right: 5px;
     padding-left: 5px;
     color: #F4FB82;
     top: 0;
     height: 49%;
     transition: all 1s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}

@media only screen and (max-width: 767px) {
     .Mask {
    transition: all 0.2s cubic-bezier(0.16, 1.08, 0.38, 0.98);
     }
}
 .Mask span {
     display: block;
}
 .Mask + .Mask {
     top: 48.9%;
     height: 51.1%;
}
 .Mask + .Mask span {
     transform: translateY(-49%);
}
 .Menu-list-item:hover .Mask, .Menu-list-item:active .Mask {
     color: #000;
     transform: skewX(12deg) translateX(5px);
}
 .Menu-list-item:hover .Mask + .Mask, .Menu-list-item:active .Mask + .Mask {
     transform: skewX(12deg) translateX(-5px);
}
 .Menu-list-item:hover::before, .Menu-list-item:active::before {
     transform: scale(1);
}

  
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <a class="btn-open-menu">
    <span class="hamburguer"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hamburger_icon.svg"></span>
  </a>
  
  <div class="header-content">
    <a class="btn-close-menu"></a>

    <nav>
     <div class="Menu">
  <ul class="Menu-list" data-offset="10">
    <li class="Menu-list-item" data-offset="20" onclick="location.href='/home';">
      Home
      <span class="Mask"><span>Home</span></span>
      <span class="Mask"><span>Home</span></span>
    </li>
    <li class="Menu-list-item" data-offset="16" onclick="location.href='/about';">
      About
      <span class="Mask"><span>About</span></span>
      <span class="Mask"><span>About</span></span>
    </li>
    <li class="Menu-list-item" data-offset="12" onclick="location.href='/contact';">
      Contact
      <span class="Mask"><span>Contact</span></span>
      <span class="Mask"><span>Contact</span></span>
    </li>

  </ul>
</div>
       </nav>
   
</header>

【问题讨论】：

  • 这能回答你的问题吗？ jQuery click() event catch-all?
  • 我不这么认为，我只是尝试了代码，但是因为需要通过单击汉堡图标打开菜单，所以代码现在停止打开菜单。该问题的代码是用于页面上显示的一个框，我认为它不需要被打开
  • 原理是一样的。稍微修改一下

标签： javascript html jquery css


【解决方案1】：

您可以通过在打开的点击处理程序中使用stopPropagation 来简化此操作，并在通用点击处理程序header 处理程序中关闭菜单。

代码

    $('.btn-open-menu').click(function (e) {
      $('header').addClass('open');
      $('html').addClass('open');
      $('html, body').addClass('noscroll');
      e.stopPropagation();
    });

您可以通过点击背景来打开菜单：

  $(".header-content").click(function (e) {
    e.stopPropagation();
  });

参考：https://api.jquery.com/event.stoppropagation/

Demo

【讨论】：

  • 非常感谢 Irvin，您将它链接到我的 codepen 的 codepen，您能否链接您的修订版以便我可以看到它的工作原理？
  • 是的，请参阅：codepen.io/irvin-dominin/pen/eYWjLGY
  • 非常感谢！差不多就在那里，唯一剩下的问题是如果您单击菜单背景（粉红色），菜单会关闭，有没有办法阻止它？
  • 检查编辑codepen.io/irvin-dominin/pen/eYWjLGY
  • 谢谢，虽然关闭按钮不再起作用。其他答案之一已经解决了这个问题，方法是在菜单后面添加一个覆盖，单击时关闭菜单。
【解决方案2】：

更好的方法是在标题后面创建一个覆盖元素，并在单击时隐藏它和菜单。

jQuery(document).ready(function($){
    $('.btn-open-menu').click(function () {
        $('header').addClass('open');
     $('html').addClass('open');
      $('html, body').addClass('noscroll');

    });

    $('.link-menu').click(function () {
        $('header').removeClass('open');
      $('html').removeClass('open');
      $('html, body').removeClass('noscroll');
      
    });

    $('.btn-close-menu').click(function () {
        $('header').removeClass('open');
     $('html').removeClass('open');
      $('html, body').removeClass('noscroll');
      
    });
  
      $('.btn-open-menu2').click(function () {
        $('header').addClass('open');
     $('html').addClass('open');
        $('html, body').addClass('noscroll');
    });

    $('.link-menu').click(function () {
        $('header').removeClass('open');
      $('html').removeClass('open');
      $('html, body').removeClass('noscroll');
      
    });

    $('.btn-close-menu2').click(function () {
        $('header').removeClass('open');
     $('html').removeClass('open');
      $('html, body').removeClass('noscroll');
      
    });
    
    $('.overlay').click(function () {
        $('header').removeClass('open');
     $('html').removeClass('open');
      $('html, body').removeClass('noscroll');
      
    });



});
 header {
     width: 100%;
     
     background-color: transparent;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 10;
     transition: 0.5s ease-in-out;
}


 header .btn-open-menu {
     width: 25px;
     height: 25px;
     position: absolute;
     top: 50px;
     right: 50px;
     cursor: pointer;
}

@media only screen and (max-width: 767px) {
    header .btn-open-menu {
     top: 25px;
     right: 20px;
}
}

@media only screen and (max-width: 767px) {
     header .header-content {
     width: 100% !important;
     }
}
 header .header-content {
     width: 30%;
     height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
     background-color: #FB4D98;
     box-sizing: border-box;
     position: absolute;
     top: 0;
         left:initial; right: -100%;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     align-content: center;
     transition: 0.8s ease-in-out;
}


@media only screen and (max-width: 767px) {
     header .header-content .btn-close-menu {
     top: 20px !important;
     right: 20px !important;
     }
}

 header .header-content .btn-close-menu {
     width: 25px;
     height: 25px;
     position: absolute;
     top: 50px;
     right: 50px;
     cursor: pointer;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     flex-direction: row;
     align-content: center;
}
 header .header-content .btn-close-menu:before, header .header-content .btn-close-menu:after {
     background: #F4FB82;
     content: '';
     display: block;
     width: 100%;
     height: 4px;
     position: absolute;
     transition: 0.5s ease-in-out;
}
 header .header-content .btn-close-menu:before {
     transform: rotate(45deg);
}

 header .header-content .btn-close-menu:hover{
     transform: rotate(180deg);
     transition:0.5s ease-in-out;
     
}

 header .header-content .btn-close-menu:after {
     transform: rotate(-45deg);
}

 header .header-content nav {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     align-content: center;
}
 header .header-content nav a {
     color: #000;
     letter-spacing: 0.5px;
     line-height: 35px;
     text-decoration: none;
     transition: 0.5s;
}
 header .header-content nav a:hover {
     color: rgba(0, 0, 0, 0.5);
     transition: 1s;
}
 header .header-content .social {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 40px 0 0 0;
     font-size: 20px;
}
 header .header-content .social a {
     color: #000;
     text-decoration: none;
     margin: 0 10px;
     transition: 0.5s;
}
 header .header-content .social a:hover {
     color: #F4FB82;
     transform: scale(1.5);
     transition: 0.5s;
}


 header.open .overlay{
   position:fixed;
   width:100vW;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.5);
     transition: 0.5s ease-in-out;
}
 header.open .btn-open-menu, header.open .logo {
     opacity: 0;
     transition: 1s ease-in-out;
}
 header.open .header-content {
     left:initial; right: 0;
     transition: 0.8s ease-in-out;
}

 .Menu-list {
     font-family: "alliance";
     font-size: 4vw;
     line-height: 1.2;
     text-transform: uppercase;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
}

@media only screen and (max-width: 767px) {
     .Menu-list {
     font-family: "alliance";
     font-size: 12vw;
     }
}
 .Menu-list-item {
     position: relative;
     color: transparent;
     cursor: pointer;
}

 ul.Menu-list{
     padding-inline-start: 0px !important;
     
 }
 .Menu-list-item::before {
     content: '';
     display: block;
     position: absolute;
     top: 49%;
     left: -10%;
     right: -10%;
     height: 4px;
     border-radius: 4px;
     margin-top: -2px;
     background: #F4FB82;
     transform: scale(0);

     z-index: 1;
}
  .Mask {
     display: block;
     position: absolute;
     overflow: hidden;
     padding-right: 5px;
     padding-left: 5px;
     color: #F4FB82;
     top: 0;
     height: 49%;
     transition: all 1s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}

@media only screen and (max-width: 767px) {
     .Mask {
    transition: all 0.2s cubic-bezier(0.16, 1.08, 0.38, 0.98);
     }
}
 .Mask span {
     display: block;
}
 .Mask + .Mask {
     top: 48.9%;
     height: 51.1%;
}
 .Mask + .Mask span {
     transform: translateY(-49%);
}
 .Menu-list-item:hover .Mask, .Menu-list-item:active .Mask {
     color: #000;
     transform: skewX(12deg) translateX(5px);
}
 .Menu-list-item:hover .Mask + .Mask, .Menu-list-item:active .Mask + .Mask {
     transform: skewX(12deg) translateX(-5px);
}
 .Menu-list-item:hover::before, .Menu-list-item:active::before {
     transform: scale(1);
}

  .social {
     position: fixed;
     bottom: 60px;
}

 .copyright {
     position: fixed;
     bottom: 40px;
     font-family: "alliance";
     font-size: 14px;
     color: #0E0E0E;
     white-space: nowrap;
 }
 
  .privacy-policy {
     position: fixed;
     bottom: 20px;
     font-family: "alliance";
     font-size: 8px;
     color: #0E0E0E !important;
     white-space: nowrap;
 }
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="overlay"></div>
  <a class="btn-open-menu">
    <span class="hamburguer"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hamburger_icon.svg"></span>
  </a>
  
  <div class="header-content">
    <a class="btn-close-menu"></a>

    <nav>
     <div class="Menu">
  <ul class="Menu-list" data-offset="10">
    <li class="Menu-list-item" data-offset="20" onclick="location.href='/home';">
      Home
      <span class="Mask"><span>Home</span></span>
      <span class="Mask"><span>Home</span></span>
    </li>
    <li class="Menu-list-item" data-offset="16" onclick="location.href='/about';">
      About
      <span class="Mask"><span>About</span></span>
      <span class="Mask"><span>About</span></span>
    </li>
    <li class="Menu-list-item" data-offset="12" onclick="location.href='/contact';">
      Contact
      <span class="Mask"><span>Contact</span></span>
      <span class="Mask"><span>Contact</span></span>
    </li>

  </ul>
</div>
       </nav>
   
</header>

【讨论】：

    【解决方案3】：

    您可以将事件侦听器添加到窗口本身，以便在您单击的任何位置关闭。

    window.addEventListener('click', (e) => {
  if (e.target !== document.getElementById('dropdown')) {
    // remove class here
  }
})

// (e.target as HTMLElement) if you're using typescript

    有时，如果您单击下拉列表中的某个项目，但由于直接元素不是下拉列表本身，它仍会关闭，这可能会出现问题。您可以使用 contains 解决此问题。

    window.addEventListener('click', (e) => {
  const dropdown = document.getElementByid('dropdown')
  const item = document.getElementsByClass('dropdownItem')[0]

  if (e.target !== dropdown && !e.target.contains(item)) {
    // remove class here
  }
})

    【讨论】：

    • 感谢您的回答，我不确定这是我需要的，您能否将您的代码实现到我的 jQuery 中以显示它的工作原理？
    【解决方案4】：

    你可以试试这个。您缺少的是stopPropagation()

    jQuery(document).ready(function($){
    $('.btn-open-menu').click(function (e) {
    e.stopPropagation();
        $('header').addClass('open');
     $('html').addClass('open');
      $('html, body').addClass('noscroll');

    });

    $('.link-menu').click(function () {
        $('header').removeClass('open');
      $('html').removeClass('open');
      $('html, body').removeClass('noscroll');
      
    });

    $('.btn-close-menu').click(function (e) {
     e.stopPropagation();
        $('header').removeClass('open');
     $('html').removeClass('open');
      $('html, body').removeClass('noscroll');
      
    });
  
      $('.btn-open-menu2').click(function () {
        $('header').addClass('open');
     $('html').addClass('open');
        $('html, body').addClass('noscroll');
    });

    $('.link-menu').click(function () {
        $('header').removeClass('open');
      $('html').removeClass('open');
      $('html, body').removeClass('noscroll');
      
    });

    $('.btn-close-menu2').click(function () {
        $('header').removeClass('open');
     $('html').removeClass('open');
      $('html, body').removeClass('noscroll');
      
    });

    $(document).click(function() {
      $('header').removeClass('open');
     $('html').removeClass('open');
     $('html, body').removeClass('noscroll');
});

});
    header {
     width: 100%;
     
     background-color: transparent;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 10;
     transition: 0.5s ease-in-out;
}


 header .btn-open-menu {
     width: 25px;
     height: 25px;
     position: absolute;
     top: 50px;
     right: 50px;
     cursor: pointer;
}

@media only screen and (max-width: 767px) {
    header .btn-open-menu {
     top: 25px;
     right: 20px;
}
}

@media only screen and (max-width: 767px) {
     header .header-content {
     width: 100% !important;
     }
}
 header .header-content {
     width: 30%;
     height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
     background-color: #FB4D98;
     box-sizing: border-box;
     position: absolute;
     top: 0;
         left:initial; right: -100%;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     align-content: center;
     transition: 0.8s ease-in-out;
}


@media only screen and (max-width: 767px) {
     header .header-content .btn-close-menu {
     top: 20px !important;
     right: 20px !important;
     }
}

 header .header-content .btn-close-menu {
     width: 25px;
     height: 25px;
     position: absolute;
     top: 50px;
     right: 50px;
     cursor: pointer;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     flex-direction: row;
     align-content: center;
}
 header .header-content .btn-close-menu:before, header .header-content .btn-close-menu:after {
     background: #F4FB82;
     content: '';
     display: block;
     width: 100%;
     height: 4px;
     position: absolute;
     transition: 0.5s ease-in-out;
}
 header .header-content .btn-close-menu:before {
     transform: rotate(45deg);
}

 header .header-content .btn-close-menu:hover{
     transform: rotate(180deg);
     transition:0.5s ease-in-out;
     
}

 header .header-content .btn-close-menu:after {
     transform: rotate(-45deg);
}

 header .header-content nav {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     align-content: center;
}
 header .header-content nav a {
     color: #000;
     letter-spacing: 0.5px;
     line-height: 35px;
     text-decoration: none;
     transition: 0.5s;
}
 header .header-content nav a:hover {
     color: rgba(0, 0, 0, 0.5);
     transition: 1s;
}
 header .header-content .social {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 40px 0 0 0;
     font-size: 20px;
}
 header .header-content .social a {
     color: #000;
     text-decoration: none;
     margin: 0 10px;
     transition: 0.5s;
}
 header .header-content .social a:hover {
     color: #F4FB82;
     transform: scale(1.5);
     transition: 0.5s;
}


 header.open {
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.5);
     transition: 0.5s ease-in-out;
}
 header.open .btn-open-menu, header.open .logo {
     opacity: 0;
     transition: 1s ease-in-out;
}
 header.open .header-content {
     left:initial; right: 0;
     transition: 0.8s ease-in-out;
}

 .Menu-list {
     font-family: "alliance";
     font-size: 4vw;
     line-height: 1.2;
     text-transform: uppercase;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
}

@media only screen and (max-width: 767px) {
     .Menu-list {
     font-family: "alliance";
     font-size: 12vw;
     }
}
 .Menu-list-item {
     position: relative;
     color: transparent;
     cursor: pointer;
}

 ul.Menu-list{
     padding-inline-start: 0px !important;
     
 }
 .Menu-list-item::before {
     content: '';
     display: block;
     position: absolute;
     top: 49%;
     left: -10%;
     right: -10%;
     height: 4px;
     border-radius: 4px;
     margin-top: -2px;
     background: #F4FB82;
     transform: scale(0);

     z-index: 1;
}
  .Mask {
     display: block;
     position: absolute;
     overflow: hidden;
     padding-right: 5px;
     padding-left: 5px;
     color: #F4FB82;
     top: 0;
     height: 49%;
     transition: all 1s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}

@media only screen and (max-width: 767px) {
     .Mask {
    transition: all 0.2s cubic-bezier(0.16, 1.08, 0.38, 0.98);
     }
}
 .Mask span {
     display: block;
}
 .Mask + .Mask {
     top: 48.9%;
     height: 51.1%;
}
 .Mask + .Mask span {
     transform: translateY(-49%);
}
 .Menu-list-item:hover .Mask, .Menu-list-item:active .Mask {
     color: #000;
     transform: skewX(12deg) translateX(5px);
}
 .Menu-list-item:hover .Mask + .Mask, .Menu-list-item:active .Mask + .Mask {
     transform: skewX(12deg) translateX(-5px);
}
 .Menu-list-item:hover::before, .Menu-list-item:active::before {
     transform: scale(1);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <a class="btn-open-menu">
    <span class="hamburguer"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hamburger_icon.svg"></span>
  </a>
  <div class="header-content">
    <a class="btn-close-menu"></a>
    <nav>
      <div class="Menu">
        <ul class="Menu-list" data-offset="10">
          <li class="Menu-list-item" data-offset="20" onclick="location.href='/home';">
            Home
            <span class="Mask"><span>Home</span></span>
            <span class="Mask"><span>Home</span></span>
          </li>
          <li class="Menu-list-item" data-offset="16" onclick="location.href='/about';">
            About
            <span class="Mask"><span>About</span></span>
            <span class="Mask"><span>About</span></span>
          </li>
          <li class="Menu-list-item" data-offset="12" onclick="location.href='/contact';">
            Contact
            <span class="Mask"><span>Contact</span></span>
            <span class="Mask"><span>Contact</span></span>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  </header>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2015-10-24
      • 2019-06-30
      • 1970-01-01
      • 2020-02-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode