0
141
Views¿Cómo evitar que todos los íconos sociales se activen simultáneamente cuando se hace clic en uno de ellos?
Cada vez que se hace clic en un ícono de compartir en redes sociales, todos los demás íconos sociales también se activan.
Este es mi HTML.
<div class="share"> <div class="toggle"></div> <ul> <li><a id="facebook-icon-hover" href="#"> <i class="facebook-icon-hover fab fa-facebook"></i></a></li> <li><a id="instagram-icon-hover" href="#"> <i class="instagram-icon-hover fab fa-instagram"></i></a></li> <li><a id="youtube-icon-hover" href="#"> <i class="youtube-icon-hover fab fa-youtube"></i></a></li> <li><a id="whatsapp-icon-hover" href="#"> <i class="whatsapp-icon-hover fab fa-whatsapp"></i></a></li> <li><a id="pinterest-icon-hover" href="#"> <i class="pinterest-icon-hover fab fa-pinterest"></i></a></li> <li><a id="snapchat-icon-hover " href="#"> <i class="snapchat-icon-hover fab fa-snapchat"></i></a></li> <li><a id="tumblr-icon-hover" href="#"> <i class="tumblr-icon-hover fab fa-tumblr"></i></a></li> <li><a id="twitter-icon-hover" href="#"> <i class="twitter-icon-hover fab fa-twitter"></i></a></li> </ul> </div>Este es mi JS.
<script type="text/javascript"> $(document).ready(function() { $('.toggle').click(function(){ $('.toggle').toggleClass('active') $('ul').toggleClass('active') }) }) </script>
·
Juan Pablo Isaza
1 answers
Answer question0
Está alternando la clase active en todos los elementos que tienen una clase de toggle y todos los <ul> en cada clic de alternancia. Debe alternar las clases active solo en el elemento en el que se hizo clic y el <ul> más cercano. Use el argumento de entrada del evento dentro de la función de devolución de llamada proporcionada y cambie la clase solo en ese elemento (y su hermano - <ul> ):
$(document).ready(function() { $('.toggle').click( function(event) { // event as input const el = $(event.currentTarget); // extract clicked element from input Event el.toggleClass('active'); el.next().toggleClass('active'); // find first sibling, which is <ul> in your case and toggle class 'active' on it }) })
·
Juan Pablo Isaza
Report
Answer question