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

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



$('.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在页面生命周期中的运行时间要晚得多,这可能意味着元素在隐藏之前的短时间内可见。

要解决您的实际问题,您只需在单个toggleClass元素上使用i。无需显示/隐藏其他内容。尝试这个:



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

关于jquery - jQuery简单事件,它会在单击时更改图标,并在单击时返回上一个图标,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43538251/

10-12 12:36
查看更多