针对一个悬停列表项目的'a'兄弟

Question

我在我的网站上嵌套导航。它看起来是这样的：

<ul> 
    <li><a>Main Link 1</a> 
    <ul> 
     <li>Sublist Item of Main Link 1</li> 
    </ul> 
    </li> 

    <li><a>Main Link 2</a> 
    <ul> 
     <li>Sublist Item of Main Link 2</li> 
    </ul> 
    </li> 


</ul> 

我想只针对a链接时，它的兄弟姐妹，在这种情况下，ul，孩子们徘徊。我试图用jQuery来实现，但找不到合适的解决方案。

在此先感谢

Answer 1

如果你添加一些识别类的HTML：

<ul> 
    <li><a class="mainLink">Main Link 1</a> 
    <ul class="linkHoverTarget"> 
     <li>Sublist Item of Main Link 1</li> 
    </ul> 
    </li> 

    <li><a class="mainLink">Main Link 2</a> 
    <ul class="linkHoverTarget"> 
     <li>Sublist Item of Main Link 2</li> 
    </ul> 
    </li> 
</ul> 

您可以悬停事件注册，然后去那些徘徊像这样的活动的相应链接：

$(".linkHoverTarget li").hover(
    function() { 
     // get the link in a sibling of our parent ul 
     $(this).parent().parent().find(".mainLink"); 
    } 
); 

这可能可以用更复杂和脆弱的选择器来完成，而不需要添加标识类，但它肯定不是很清楚，可以这样做。