带有jquery二级的下拉菜单

Question

我正在尝试使用jquery创建一个垂直下拉菜单，我无法弄清楚为什么会发生这种情况。

第一级子菜单工作正常，但第二级（子级）正在做一些奇怪的事情 - 它会向上滑动！

只需选中此项并点击2222子菜单：

https://jsfiddle.net/adam900/ba3d7bu0/9/

//jQuery
$(document).ready(function() {
  $("#nav ul li").has("> .sub-nav").click(function() {
    $(this).find("> .sub-nav").stop().slideToggle();
  });
});

/*CSS*/
#nav ul {
  display: inline-table;
  padding-left: 0;
}
#nav li a {
  display: block;
}
#nav .sub-nav {
  display: none;
}

<!--HTML-->
<div id="nav">
  <ul>
    <li><a href="#">11111</a></li>
    <li><a href="#">11111 &darr;</a>
      <ul class="sub-nav">
        <li><a href="#">2222</a></li>
        <li><a href="#">2222 &darr;</a>
          <ul class="sub-nav">
            <li><a href="#">333333</a></li>
            <li><a href="#">333333</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">11111</a></li>
  </ul>
</div>

你能告诉我如何解决它吗？

Answer 1

使用 stopPropagation()

$(document).ready(function() {
    $("#nav ul li").has("> .sub-nav").click(function(e) {
        e.stopPropagation();
        $(this).find("> .sub-nav").stop().slideToggle();
    });
});

<强> Updated Fiddle

Answer 2

对于嵌套的li元素，执行两次click处理程序。使用

 e.stopPropagation();

防止事件冒泡。

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#nav ul li").click(function(e) {
    e.stopPropagation();
    $(this).find("> .sub-nav").slideToggle();
  });
});

＆＃13;

#nav ul {
  display: inline-table;
  padding-left: 0;
}
#nav li a {
  display: block;
}
#nav .sub-nav {
  display: none;
}
#nav > ul li a {
  padding: 16px 20px 17px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="nav">
  <ul>
    <li><a href="#">11111</a>
    </li>
    <li><a href="#">11111 &darr;</a>
      <ul class="sub-nav">
        <li><a href="#">2222</a>
        </li>
        <li><a href="#">2222 &darr;</a>
          <ul class="sub-nav">
            <li><a href="#">333333</a>
            </li>
            <li><a href="#">333333</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">11111</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;