为什么我的子菜单中的锚点返回 false

Question

我正在为我的导航子菜单编写一个jquery下拉脚本。 我在顶级锚点上返回了 false，但问题是这也适用于子菜单中的锚点。 我的脚本还将 V 形添加到具有子菜单的顶级链接，但这些链接也会添加到子菜单链接中。 我做错了什么？ 这是一个jsFiddle。 谢谢你的时间。

<div class="nav-outter">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li class="has-submenu"><a href="#">Services</a>
        <ul>
          <li><a href="#">Web Development</a></li>
          <li><a href="#">Photography</a></li>
          <li><a href="#">Multimedia</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
$(document).ready(function() {
  $('nav > ul > li.has-submenu').each(function() {
    $(this).find('a:first-child').each(function() {
      $(this).append('<i class="fa fa-chevron-down"></i>');
      $(this).on('click', function(e) {
        e.preventDefault();
        $(this).parent().find('ul').each(function() {
          if ($(this).hasClass('active')) {
            $(this).removeClass('active')
              .slideUp(300);
          } else {
            $(this).addClass('active')
              .slideDown(300);
          }
        });
      });
    });
  });
});
.nav-outter {
  position: relative;
  z-index: 1;
}
nav > ul {
  list-style: none;
}
nav > ul > li {
  display: inline-block;
}
nav > ul > li > a {
  padding: 3px 15px;
  font-size: 1.2em;
  color: #2c3e50;
  text-decoration: none;
}
nav > ul > li > ul {
  display: none;
  position: absolute;
  z-index: 5;
  list-style: none;
  border: 1px solid #FC4349;
  border-bottom: 0px;
  margin-left: 0px;
  padding-left: 0px;
  margin-top: 3%;
}
nav > ul > li > ul > li {
  border-bottom: 1px solid #FC4349;
}
nav > ul > li > ul > li > a {
  display: block;
  padding: 15px 25px 15px 10px;
  text-align: left;
  background: #fff;
  color: #FC4349;
  text-decoration: none;
}

Answer 1

find('a:first-child')将包括每个第一个孩子，这是所有链接，因为每个孩子都是一个first-child

更简单的方法是仅针对has-submenu的孩子并删除一个each

$('nav > ul > li.has-submenu').children('a').each(function() {
      $(this).append('<i class="fa fa-chevron-down"></i>');
      $(this).on('click', function(e) {
      .....

或者，如果您使用过find('a:first')则使用您的代码，它将起作用，因为您将仅针对每个类中的第一个<a>