在没有锚标签的情况下使用 (this)

Question

目前有一个大型菜单，其结构如下：

<ul>
  <li>
    <a class="level-top">Link 1</a>
    <ul class="subnav">Subnav</ul>
  </li>
  <li>
    <a class="level-top">Link 2</a>
    <ul class="subnav">
      <li>
        <a>Link 1 Level 2</a>
        <ul class="sub-subnav"></ul>
      </li>
    </ul>
  </li>
</ul>

选择链接 1 时，我希望显示 ul.subnav。目前我使用的代码是：

jQuery('.mobile-nav li a.level-top').click(function () {
  togglePanel(jQuery(this).find('ul.subnav'));
});

如果我从上面的 jquery 代码中删除 a.level-top，第一级（子导航）会正确打开。但是，因为我会将点击事件附加到 li 元素，所以由于元素嵌套在 li 元素中，因此无法将手风琴切换到更深的导航中。

我需要将点击功能附加到锚标记（a.level-top），但是 (this) 找不到要打开的正确子菜单。

有什么方法可以使用this - 锚标记？

谢谢

Answer 1

使用.next()，而不是.find()：

jQuery('.mobile-nav li a.level-top').click(function () {
  togglePanel(jQuery(this).next('ul.subnav'));
});

原因是，ul.subnav 是 <a> 的兄弟姐妹，而不是 <a> 的孩子。 .find() 用于获取孩子。