J'essaie de changer l'icône sur l'événement de clic par jQuery et de retourner l'icône précédente en cliquant à nouveau sur le même lien. J'ai la liste de navigation qui devrait s'ouvrir en cliquant sur le lien (avec l'icône de flèche vers le bas) qui devrait être modifiée pour l'icône de flèche vers le haut. Ensuite, lorsque je clique à nouveau, il doit renvoyer l'icône de flèche vers le haut et fermer la navigation.
Voici du code. Je ne sais pas comment retourner la première icône au deuxième clic:
$('.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>3 réponses
Tout d'abord, vous devez noter qu'il est préférable d'utiliser CSS pour définir la visibilité des éléments lors du chargement initial de la page. JS s'exécute beaucoup plus tard dans le cycle de vie de la page et peut signifier que les éléments sont visibles pendant une courte période avant d'être masqués.
Pour résoudre votre problème réel, vous pouvez simplement utiliser toggleClass sur le seul élément i. Il n'est pas nécessaire d'afficher / masquer les différents. Essaye ç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>
</ul>$('.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>Au lieu des tracas, vous pouvez faire quelque chose comme ça. Ayez deux icônes à l'intérieur et utilisez CSS pour les masquer et les afficher:
$(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>Questions connexes
De nouvelles questions
jquery
jQuery est une bibliothèque JavaScript, pensez également à ajouter la balise JavaScript. jQuery est une bibliothèque JavaScript multi-navigateur populaire qui facilite la traversée du Document Object Model (DOM), la gestion des événements, les animations et les interactions AJAX en minimisant les écarts entre les navigateurs. Une question marquée jQuery doit être liée à jQuery, donc jQuery doit être utilisée par le code en question et au moins les éléments liés à l'utilisation de jQuery doivent être dans la question.
En Español