2017-05-31 82 views
0

我的菜单的基本结构看起来像这样在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; 
} 

当我点击有孩子的列表项时,它会阻止重定向到页面并添加一个分类按照我想要的方式。 但是当我第二次点击时,它不会重定向到它的相关链接。

我怎样才能使第二次点击重定向?

+0

你可能需要把完整的URL到HREF。 – Gerard

+0

我不明白你的问题的描述,也没有你的问题......也许这将有助于创建一个工作片段 – Ionut

+0

你的问题并不清楚 –

回答

0

当您使用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>