頁面重定向不工作

Question

我的菜單的基本結構看起來像這樣在HTML第二點擊：

<ul id="primary-menu"> 
    <li class="menu-item-has-children"> 
    <a href="/about"></a> 
    <ul class="sub-menu"> 
     <li><a href="primeaty-list">Primary</a></li> 
    </ul> 
    </li> 
</ul> 

我的jQuery看起來是這樣的：

$('ul#primary-menu > li.menu-item-has-children').click(function(e) { 
if ($(window).width() < 701) { 
    if (!$(e.target).closest('ul').is('.sub-menu')) { 
    e.preventDefault(); 
    if (!$(this).hasClass('important')) { 
     $(this).addClass('important'); 
     //toggle the menu 
    } else { 
     //redirect if second click 
     window.location = $(this).find('a').attr('href'); 
    } 
    } 
} 
}); 

這裏應該應用的CSS：

.important ul.sub-menu{ 
    display:block; 
} 
.important{ 
    display: block; 
} 

當我點擊有孩子的列表項時，它會阻止重定向到頁面並添加一個分類按照我想要的方式。 但是當我第二次點擊時，它不會重定向到它的相關鏈接。

我怎樣才能使第二次點擊重定向？

Answer 1

當您使用e.preventDefault()時，您需要在a元素上使用它，而不是在li上使用它。現在您將不得不使用window.location = $(this).attr('href');稍微更換重定向代碼。請參閱下面請片斷：

$('ul#primary-menu > li.menu-item-has-children a').click(function(e) { 
 
    if ($(window).width() < 901) { 
 
    if (!$(e.target).closest('ul').is('.sub-menu')) { 
 
     e.preventDefault(); 
 
     if (!$(this).hasClass('important')) { 
 
     $(this).addClass('important'); 
 
     //toggle the menu 
 
     } else { 
 
     //redirect if second click 
 
     console.log('redirected on second click', $(this).attr('href')); 
 
     //window.location = $(this).attr('href'); 
 
     } 
 
    } 
 
    } 
 
});

.important ul.sub-menu { 
 
    display: block; 
 
} 
 

 
.important { 
 
    display: block; 
 
    color: #f00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="primary-menu"> 
 
    <li class="menu-item-has-children"> 
 
    <a href="/about">test</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="primeaty-list">Primary</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>