在没有锚标记的情况下使用 (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>

选择link 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> 的 child。 .find() 用于获取 child.

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

Using (this) without the anchor tag

jquery

mobile

this

nav