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>
0
Blosom 21 avril 2017 à 11:57

3 réponses

Meilleure réponse

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>
0
Rory McCrossan 21 avril 2017 à 09:01
$('.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>
0
esraa fayez 24 déc. 2019 à 11:48

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>
0
Praveen Kumar Purushothaman 21 avril 2017 à 09:01