Jquery悬停，获取子ul并显示

我有一个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>

---

但是它不起作用，有什么想法吗？

你可以用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();
});

这里是工作示例

---

第二部分是为了再次隐藏

您可以尝试以下操作：

$('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（）、children（）或任何最适合您的代码的遍历

你想用

$（'li:has（>ul）

实现什么？这是不合法的。@SteveDevGuy现在它把它藏在了mouseout上，我更新了答案。

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