ページはHTMLで次のようになります私のメニューの

Question

基本構造を動作していない第二のクリックにリダイレクト：

$('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：

<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のは、次のようになります。

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

子供がいるリストアイテムをクリックすると、ページにリダイレクトされず、クラスターが追加されますそれが私の望むように。 しかし、2回目にクリックすると、関連するリンクにリダイレクトされません。

2回目のクリックでリダイレクトする方法を教えてください。

Answer 1

e.preventDefault()を使用する場合、liではなくa要素で使用する必要があります。今度は、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>