我正在尝试通过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>
答案 0 :(得分:0)
首先,您应该注意,使用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>
答案 1 :(得分:0)
而不是麻烦,你可以做这样的事情。里面有两个图标,并使用CSS隐藏和显示它们:
$(function () {
$("a").click(function (e) {
e.preventDefault();
$(this).toggleClass("checked");
});
});
&#13;
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;}
&#13;
<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>
&#13;
答案 2 :(得分:0)
$('.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>