Comment créer un bouton bascule avec Sass et jQuery ?

Création d'un bouton bascule avec Sass et jQuery

Si vous cherchez à créer un bouton bascule qui conserve son état au clic, vous Il faudra aller au-delà du CSS seul.

Approche sémantique

L'approche préférée consiste à utiliser une case à cocher, en la stylisant en fonction de son état coché. Cependant, cela peut impliquer des éléments et une complexité supplémentaires.

Solution jQuery

Une méthode plus efficace consiste à utiliser jQuery et deux images d'arrière-plan pour les différents états des boutons.

HTML :

<code class="html"><a id="button" title="button">Press Me</a></code>

JS :

<code class="js">$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});</code>

CSS :

<code class="css">a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}</code>

Cette fonction jQuery fait basculer la classe "down" sur le bouton lorsque vous cliquez dessus. Les classes CSS définissent les images d'arrière-plan et les styles de bordure pour chaque état.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!