jQuery的懸停，讓孩子UL和顯示

Question

我有一個WordPress的網站，它輸出UL像這樣：

<ul role="primary"> 
<li class="page_item page-item-7"><a href=" /services/">Services</a> 
    <ul class='children'> 
     <li class="page_item page-item-23"><a href=" /services/accounts-production/">Accounts Production</a></li> 
     <li class="page_item page-item-25"><a href=" /services/audit/">Audit</a></li> 
     <li class="page_item page-item-27"><a href=" /services/tax-planning/">Tax Planning</a></li> 
     <li class="page_item page-item-29"><a href=" /services/business-startup-advice/">Business Startup Advice</a></li> 
     <li class="page_item page-item-31"><a href=" /services/accounting-systems/">Accounting Systems</a></li> 
     <li class="page_item page-item-33"><a href=" /services/payroll-bureau/">Payroll Bureau</a></li> 
    </ul> 
</li> 
</ul> 

我使用jQuery來添加一個類的父的家長裏，我需要它，當那個具體的李在孩子上空盤旋時會顯示出來。

$('ul[role="primary"] li ul.children li').hide(); 

    $('li:has(> ul)').addClass('parent').mouseover(function() { 

    $(this).children().show(); 

}); 

但它不工作，有什麼想法？

Answer 1

你可以嘗試以下方法：

$('ul[role="primary"] li ul.children').hide(); 
$('ul[role="primary"] li').addClass('parent').hover(
    function(){ //mouseenter 
      $(this).find('ul').show(); 
    }, function(){//mouseexit 
     $(this).children('ul').hide(); 
    }); 

正如你所看到的，你可以使用find（）方法，兒童（）或最適合您的代碼的任何遍歷。

Answer 2

您可以在JavaScript中

$('ul[role="primary"] li ul.children li').hide(); 

$('li').has('ul.children').addClass('parent').mouseover(function() { 
    $(this).find('li').show(); 
}); 
$('li').has('ul.children').addClass('parent').mouseout(function() { 
    $(this).find('li').hide(); 
}); 

做這樣的

這裏工作示例jsFiddle

第二部分是再次隱藏！