在阻止默认操作时启用菜单的链接

Enable links of the menu when the default action was prevented

本文关键字:启用 菜单 链接 操作 默认      更新时间:2023-12-29

我有以下情况:

jQuery(document).ready(function($) {
  "use strict";
  function active_menu(e) {
    e.preventDefault();
    e.stopPropagation();
    var $this = $(this);
    if (!$this.is(':animated')) { // to prevent double click issue
      $this.toggleClass('active');
    }
  }
  $(document).on('click', '.menu-item-has-children', active_menu);
});
 nav {
   position: relative;
   display: inline-block;
   top: auto;
   overflow: visible;
   background-color: transparent;
 }
 nav > ul {
   list-style: none;
   margin: 14px 0 0 0;
   float: right;
   position: relative;
 }
 nav > ul > li {
   float: left;
   min-width: 0;
   position: relative;
 }
 nav > ul > li.menu-item-has-children:before {
   content: "";
   border-bottom: 2px solid #000;
   border-right: 2px solid #000;
   width: 7px;
   height: 7px;
   position: absolute;
   right: -4px;
   bottom: 7px;
   background-color: transparent;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 nav > ul > li a {
   color: #1c1c1c;
   font-weight: 400;
   font-size: 13px;
   text-transform: uppercase;
   text-align: center;
   display: inline-block;
   padding-bottom: 4px;
   margin: 0;
   padding: 0 20px;
 }
 nav > ul > li span {
   display: inline-block;
 }
 nav > ul ul {
   display: none;
   list-style: none;
   position: absolute;
   background: #fff;
   border: 1px solid #e1e1e1;
   margin: 0;
   min-width: 200px;
   margin-top: 33px;
   z-index: 2001;
 }
 nav > ul > li > ul:before {
   content: "";
   display: block;
   position: absolute;
   width: 200px;
   min-width: 200px;
   height: 36px;
   top: -36px;
   left: 0;
   z-index: 2004;
 }
 nav > ul li.active > ul {
   display: block;
   z-index: 2003;
 }
 nav > ul ul li {
   position: relative;
 }
 nav > ul ul li a {
   width: 100%;
   text-align: left;
   padding: 6px 13px 7px 13px;
 }
 nav > ul ul ul {
   position: absolute;
   left: 100%;
   top: 0;
   margin-left: 10px;
   margin-top: 0;
   z-index: 2002;
   border: 1px solid #e1e1e1;
 }
 nav > ul ul ul:before {
   position: absolute;
   content: "";
   top: 0;
   left: -11px;
   width: 11px;
   height: 100px;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <ul id="main_menu">
    <li id="nav-menu-item-1636" class="main-menu-item  menu-first  menu-item-type-custom menu-item-object-custom">
      <a href="http://wpthemetestdata.wordpress.com/" class="menu-link  main-menu-link">
        <span>Home</span>
      </a>
    </li>
    <li id="nav-menu-item-1637" class="main-menu-item">
      <a href="#/?page_id=703" class="menu-link  main-menu-link">
        <span>Blog</span>
      </a>
    </li>
    <li id="nav-menu-item-1638" class="main-menu-item">
      <a href="#/?page_id=701" class="menu-link  main-menu-link">
        <span>Front Page</span>
      </a>
    </li>
    <li id="nav-menu-item-1639" class="main-menu-item menu-item-has-children has_children">
      <a href="#/?page_id=2" class="menu-link  main-menu-link">
        <span>About The Tests</span>
      </a>
      <ul class="navi first  menu-depth-1">
        <li id="nav-menu-item-1697">
          <a href="#/?page_id=1133" class="menu-link  sub-menu-link">
            <span>Page Image Alignment</span>
          </a>
        </li>
        <li id="nav-menu-item-1698">
          <a href="#/?page_id=1134" class="menu-link  sub-menu-link">
            <span>Page Markup And Formatting</span>
          </a>
        </li>
        <li id="nav-menu-item-1640">
          <a href="#/?page_id=501" class="menu-link  sub-menu-link">
            <span>Clearing Floats</span>
          </a>
        </li>
        <li id="nav-menu-item-1641">
          <a href="#/?page_id=155" class="menu-link  sub-menu-link">
            <span>Page with comments</span>
          </a>
        </li>
        <li id="nav-menu-item-1642">
          <a href="#/?page_id=156" class="menu-link  sub-menu-link">
            <span>Page with comments disabled</span>
          </a>
        </li>
      </ul>
    </li>
    <li id="nav-menu-item-1643" class="main-menu-item menu-item-has-children has_children">
      <a href="#/?page_id=174" class="menu-link  main-menu-link">
        <span>Level 1</span>
      </a>
      <ul class="navi first  menu-depth-1">
        <li id="nav-menu-item-1644" class="   menu-item-has-children has_children">
          <a href="#/?page_id=173" class="menu-link  sub-menu-link">
            <span>Level 2</span>
          </a>
          <ul class="navi  navi menu-depth-2">
            <li id="nav-menu-item-1645" class=" navi    ">
              <a href="#/?page_id=172" class="menu-link  sub-menu-link">
                <span>Level 3</span>
              </a>
            </li>
            <li id="nav-menu-item-1699" class=" navi    ">
              <a href="#/?page_id=746" class="menu-link  sub-menu-link">
                <span>Level 3a</span>
              </a>
            </li>
            <li id="nav-menu-item-1700" class=" navi    ">
              <a href="#/?page_id=748" class="menu-link  sub-menu-link">
                <span>Level 3b</span>
              </a>
            </li>
          </ul>
        </li>
        <li id="nav-menu-item-1701">
          <a href="#/?page_id=742" class="menu-link  sub-menu-link">
            <span>Level 2a</span>
          </a>
        </li>
        <li id="nav-menu-item-1702">
          <a href="#/?page_id=744" class="menu-link  sub-menu-link">
            <span>Level 2b</span>
          </a>
        </li>
      </ul>
    </li>
    <li id="nav-menu-item-1646" class="main-menu-item">
      <a href="#/?page_id=146" class="menu-link  main-menu-link">
        <span>Lorem Ipsum</span>
      </a>
    </li>
    <li id="nav-menu-item-1703" class="main-menu-item">
      <a href="#/?page_id=733" class="menu-link  main-menu-link">
        <span>Page A</span>
      </a>
    </li>
    <li id="nav-menu-item-1704" class="main-menu-item">
      <a href="#/?page_id=735" class="menu-link  main-menu-link">
        <span>Page B</span>
      </a>
    </li>
  </ul>
</nav>

功能还可以——我点击有子项的菜单,将类切换到活动状态,并显示未排序的子项列表。但问题是,当我点击子级中的锚点时,列表会关闭,链接也不会因为e.preventDefault();而做任何事情。

这个问题能解决吗?我试着解除点击绑定,但没有成功。

只需使用javascript模拟window.location.href = $(this).attr("href") 的锚点点击