jquery - 定位悬停列表项的“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");
    }
);

这可能可以通过更复杂和脆弱的选择器来完成，而无需添加标识类，但它肯定不像这样做那样清晰或可维护。