手风琴导航的切换图标

Question

我尝试遵循在SO上找到的示例，该示例的工作方式与示例类似，但实际上并非如此（即，实际上并未更改图标）。

我有一个默认情况下带有图标的手风琴导航，然后它应该在打开时切换到另一个图标，然后在单击的导航中关闭/新链接上返回到原始图标。

手风琴方面的效果还不错，它是给我的图标。

 $(function() { $('.nav-main > li > a').click(function(e) { e.preventDefault(); // disable link $('.nav-main > li > a.active').next('.nav-main__sub').slideUp(); if (!$(this).hasClass('active')) { // if NOT 'a.active' $(this).next('.nav-main__sub').slideToggle(); $('.nav-main > li > a').find('i').removeClass('fa fa-angle-up').addClass('fa fa-angle-down'); $(this).find('i').addClass('fa fa-angle-up'); $('.nav-main > li > a').removeClass('active'); $(this).addClass('active'); } else { $(this).find('i').removeClass('fa fa-angle-up').addClass('fa fa-angle-down'); $(this).removeClass("active"); } }); }); 

 @charset "UTF-8"; /* ------------------------- Navigation ------------------------- */ .nav { font-family: "AvenirLT-Heavy", Helvetica, Arial, sans-serif; font-size: 1.125rem; } .nav a { color: #00539b; } .nav a:hover { color: #f6b242; } .nav ai { color: #f6b242; vertical-align: baseline !important; font-weight: 700; float: right; } .nav-main > li { border-bottom: 1px solid #00539b; padding: 30px 0; } .nav-main > li:first-of-type { padding-top: 0; } .nav-main > li:last-of-type { border-bottom: none; } .nav-main > li > a { padding: 0 0 0.7rem; } .nav-main__sub { display: none; font-size: 0.9375rem; font-family: "AvenirLT-Roman", Helvetica, Arial, sans-serif; } .nav-main__sub li > a { padding-left: 0; } /* ------------------------- Modules ------------------------- */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <nav class="nav"> <ul class="vertical menu nav-main"> <li><a href="#">Moving &amp; Relocation <i class="fa fa-angle-down"></i></a> <ul class="vertical menu nav-main__sub"> <li><a href="/overview/">Overview</a> </li> <li><a href="">Residential</a> </li> <li><a href="">Corporate Moving</a> </li> <li><a href="">Relocation</a> </li> <li><a href="">Government Transferees</a> </li> <li><a href="">Military Personnel</a> </li> </ul> </li> <li><a href="">Workplace Solutions <i class="fa fa-angle-down"></i></a> <ul class="vertical menu nav-main__sub"> <li><a href="">Overview</a> </li> <li><a href="">Residential</a> </li> <li><a href="">Corporate Moving</a> </li> <li><a href="">Relocation</a> </li> <li><a href="">Government Transferees</a> </li> <li><a href="">Military Personnel</a> </li> </ul> </li> <li><a href="">Logistics <i class="fa fa-angle-down"></i></a> <ul class="vertical menu nav-main__sub"> <li><a href="">Overview</a> </li> <li><a href="">Residential</a> </li> <li><a href="">Corporate Moving</a> </li> <li><a href="">Relocation</a> </li> <li><a href="">Government Transferees</a> </li> <li><a href="">Military Personnel</a> </li> </ul> </li> <li><a href="">Our Capacity <i class="fa fa-angle-down"></i></a> <ul class="vertical menu nav-main__sub"> <li><a href="">Overview</a> </li> <li><a href="">Residential</a> </li> <li><a href="">Corporate Moving</a> </li> <li><a href="">Relocation</a> </li> <li><a href="">Government Transferees</a> </li> <li><a href="">Military Personnel</a> </li> </ul> </li> <li><a href="">Careers <i class="fa fa-angle-down"></i></a> <ul class="vertical menu nav-main__sub"> <li><a href="">Overview</a> </li> <li><a href="">Residential</a> </li> <li><a href="">Corporate Moving</a> </li> <li><a href="">Relocation</a> </li> <li><a href="">Government Transferees</a> </li> <li><a href="">Military Personnel</a> </li> </ul> </li> <li><a href="/contact/">Contact</a> </li> </ul> </nav> 

Answer 1

在为$(this)设置类时，还需要删除添加到上一行所有内容的向下箭头类。 因此，在此行之后：

$(this).find('i').addClass('fa-angle-up');

添加此行：

$(this).find('i').removeClass('fa-angle-down');

（请注意，我在addClass和removeClass删除了类fa ，因为不需要添加或删除它-保持不变。）

Codepen： http ：//codepen.io/anon/pen/RrEVzq