切换手风琴导航的图标

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 a i {

  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');

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

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