jQuery点击主菜单项,如果有子切换子菜单,否则打开链接

时间:2014-06-11 11:56:17

标签: jquery menu contains items

我正在尝试创建包含子项的菜单。一切都很顺利,除了没有任何子项目的主要项目应该打开自己的链接。

现在切换的工作方式应该如此,但是当我点击没有任何子项的主要项目时,他们什么都不做..

这是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;
    });

2 个答案:

答案 0 :(得分:2)

移动return: false;应该这样做,然后依靠锚的默认行为继续并更改锚点上的targetfiddle

$('.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');