javascript - Accordion 导航的切换图标

Question

我尝试遵循在 SO 上找到的示例，它的工作方式与示例类似，但它不是(即实际上没有更改图标)。

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

Accordion 方面工作得很好，这是图标给我带来了问题。

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

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

代码笔:http://codepen.io/anon/pen/RrEVzq