Links im Menü aktivieren, wenn die Standardaktion

Question

ich die folgende Situation verhindert wurde:

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>

Die Funktionalität ist eine Art ok - ich auf das Menü klicken, der Kinder hat, Toggle Die Klasse aktiv und die unsortierte Kinderliste wird angezeigt. Aber das Problem ist, dass, wenn ich auf den Anker im Kind klicke, die Liste schließt und die Verbindungen wegen e.preventDefault(); nichts tun.

Kann dies aussortiert werden? Ich habe versucht, den Klick zu lösen, aber das hat nicht funktioniert.

Answer 1

nur Javascript verwenden, um Anker, klicken Sie window.location.href = $(this).attr("href")