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将一个类添加到父级的父li中，我需要它，以便当特定的li悬停在子级上时，ul将显示。

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

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

第二部分是再次隐藏！

Jquery悬停，得到孩子ul并显示

2 个答案: