爲什麼我的子菜單中的錨會返回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> ose類