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

我试图通过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>

首先，您应该注意，使用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>

而不是麻烦，您可以做这样的事情。里面有两个图标，并使用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>

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

相关内容

最新更新

热门标签：