javascript - jquery菜单继承

Question

我有以下简单的 3 级菜单结构:

<nav class="main-nav" class="list">
  <ul>
    <li class="first lev1"><a href="">Home</a></li>        
    <li class="lev1"><a href="">Lev 1 1</a></li>
    <li class="lev1 hasc active">
      <a href="">Lev 1 2</a>
      <ul>
        <li class="first lev2 hasc">
          <a href="">Lev 2 1</a>        
          <ul>
            <li class="first lev3"><a href=""></a>Lev 3 1 </li>
            <li class="lev3"><a href="">Lev 3 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="lev1 hasc active"><a href="">Lev 1 3</a></li>
  </ul>
</nav>

我正在尝试使菜单正常工作，以便二级菜单在有子级时滑动打开，但在没有子级时是事件链接，然后所有三级链接始终是事件链接。

以下 jquery 代码适用于二级菜单的所有必需功能(防止默认并在有子级时打开三级，但如果没有则使链接处于事件状态)问题是我不确定如何越过第三级的阻止默认值？

$(".lev2").click(function (event) {
    event.preventDefault();
    if ($(this).hasClass('on')) {
        $(this).children('ul').slideUp();
        $(this).removeClass('on');
    } else {
        $(this).children('ul').slideDown();
        $(this).addClass('on');
    }
});

我研究过从菜单类“main-nav”的根开始，然后尝试对代码进行分支，但由于它是嵌套的，所以我找不到任何可行的逻辑？欢迎任何想法。

Answer 1

问题似乎是您将 click 事件 绑定(bind)到整个 li 元素，而不仅仅是链接。

试试这个:

$(".lev2 > a").click(function (event) {
    event.preventDefault();
    $(this).parent().toggleClass('on').children('ul').slideToggle();
});

它将 event 绑定(bind)到链接，并在父级 li 和 ul 上切换您的操作以进入下一个级别。

Live example at jsFiddle