jQuery 简单事件，单击时更改图标并在下次单击时返回上一个图标

Question

我正在尝试通过 jQuery 更改单击事件上的图标，并在再次单击同一链接时返回上一个图标。我有一个导航列表，它应该在单击链接(带有向下箭头图标)时打开，它应该被更改为向上箭头图标。然后，当我再次单击时，它应该返回向上箭头图标并关闭导航。

这是一些代码。我不知道如何在第二次点击时返回第一个图标:

$('.dropdown-nav').css('display', 'none');
$('.drop-arrow-up').css('display', 'none');

$('.house-build-link').on('click', function() {
  $('.dropdown-nav').toggle();
  $('.fa-long-arrow-down').css('display', 'none');
  $('.drop-arrow-up').css('display', 'inline-block');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#" class="house-build-link">
      <i class="fa fa-long-arrow-down"></i>
      <i class="fa fa-long-arrow-up drop-arrow-up"></i>
      House-renovation
    </a>
    <ul class="dropdown-nav">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
    </ul>
  </li>
</ul>

Answer 1

首先您应该注意，在初始页面加载时使用 CSS 设置元素的可见性要好得多。 JS 在页面生命周期的后期运行，这意味着元素在隐藏之前会在短时间内可见。

要解决您的实际问题，您只需在单个 i 元素上使用 toggleClass 即可。无需显示/隐藏不同的。试试这个:

$('.house-build-link').on('click', function() {
  $('.dropdown-nav').toggle();
  $(this).find('i').toggleClass('fa-long-arrow-down fa-long-arrow-up drop-arrow-up');
});

.dropdown-nav { display: none; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#" class="house-build-link">
      <i class="fa fa-long-arrow-down"></i>
      House-renovation
    </a>
    <ul class="dropdown-nav">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
    </ul>
  </li>
</ul>