我正在尝试创建包含子项的菜单。一切都很顺利,除了没有任何子项目的主要项目应该打开自己的链接。
现在切换的工作方式应该如此,但是当我点击没有任何子项的主要项目时,他们什么都不做..
这是HTML:
<div class="menu-primary" style="display: block;">
<ul class="v-list" id="menu-menu-1">
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-23" id="menu-item-23"><a href="somepath.php">Browse by Type</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-30" id="menu-item-30">
<a>aaaa</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21" id="menu-item-21"><a href="somepath.php">Browse by Author</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22" id="menu-item-22"><a href="somepath.php">Browse by Country</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20" id="menu-item-20"><a href="somepath.php">About</a></li>
</ul>
</div>
这是jquery代码:
$('.menu-item').click(function(event) {
if($(this).closest("li.menu-item").children("ul.sub-menu").length)
{
$('.sub-menu').slideToggle('fast');
}
else {
var url = $(this).closest("li.menu-item").attr('href');
window.open(url);
}
return false;
});
答案 0 :(得分:2)
移动return: false;
应该这样做,然后依靠锚的默认行为继续并更改锚点上的target
。 fiddle
$('.menu-item').click(function(event) {
if($(this).closest("li.menu-item").children("ul.sub-menu").length > 0)
{
$('.sub-menu').slideToggle('fast');
return false;
}
});
答案 1 :(得分:1)
您的代码存在一些问题。
首先,您的选择器$('.menu-item')
已经选择了<li>
元素,因此调用$(this).closest('li.menu-item')
是多余的; $(this)
与完全相同的元素匹配 - 您可以从代码中删除对.closest()
的所有调用。
其次,href
元素位于<a>
元素上,而不是您当前尝试获取的<li>
元素。将该行更改为:
var url = $(this).find("a").attr('href');