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>

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

1 个答案: