jQuery 简单事件，单击时更改图标，returns 下次单击时更改前一个图标

Question

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

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

$('.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。没有必要 show/hide 不同的。试试这个：

$('.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>

Answer 2

您可以这样做，而不是麻烦。里面有两个图标，用CSS隐藏和显示：

$(function () {
  $("a").click(function (e) {
    e.preventDefault();
    $(this).toggleClass("checked");
  });
});

a {display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 45px; text-decoration: none; color: #f33;}
/* Normal State */
a i.ion-checkmark-circled {display: none;}
/* Checked State */
a.checked {color: #f90;}
a.checked i.ion-checkmark-circled {display: inline;}
a.checked i.ion-close-circled {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<a href="" class="button">
  <i class="ion-close-circled"></i>
  <i class="ion-checkmark-circled"></i>
</a>

Answer 3

$('.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>
<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>
<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>

jQuery 简单事件，单击时更改图标，returns 下次单击时更改前一个图标

jQuery simple event which changes the icon on click and returns previous icon on next click

css

navigation

jquery

onclick

toggle