jQuery点击主菜单项，如果有子切换子菜单，其他打开链接

Question

我想创建一个子菜单项。一切都很好，除了没有任何子项目的主要项目应该打开自己的链接。

眼下切换工作像它应该，但是当我点击的主要项目没有任何子项目，他们没有做任何事情..

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

Answer 1

移动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; 
    }    
}); 

Answer 2

您的代码有几个问题。

首先，您的选择器$('.menu-item')已经选择了<li>元素，所以调用$(this).closest('li.menu-item')是多余的; $(this)匹配完全相同的元素 - 您可以从代码中删除所有对.closest()的调用。

其次，href属性是<a>元素，而不是<li>元素，你目前正试图从得到它。更改该行：

var url = $(this).find("a").attr('href');