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