JQUERY Vérifiez si la bascule est ouverte / fermée

Utilisez un extrait de code jQuery simple pour vérifier si l'élément de bascule est activé ou désactivé. La méthode la plus élémentaire consiste à utiliser le test suivant:

$(this).is(":hidden");

Une autre méthode, comme indiqué dans l'exemple suivant, consiste à utiliser l'attribut de données pour ajouter l'état "ouvert" ou "fermé" au bouton de basculement:

if (this.data('state') === 'closed') {
    $('.' + toggleBtnClass).text(moreText);
    _this.data('state', 'open'); /* 添加数据以存储状态 */
} else {
    $('.' + toggleBtnClass).text(lessText);
    _this.data('state', 'closed'); /* 添加数据以存储状态 */
}

Le plugin

le plugin jQuery.Autotoggles fournit des exemples d'application pratiques de cette fonctionnalité.

jQuery Toggle FAQs (FAQs)

Quel est le but de la fonction de bascule jQuery?

La fonction JQuery Toggle est un outil polyvalent dans le développement Web. Il permet aux développeurs de créer des éléments interactifs sur les pages Web en affichant et en cachant des éléments HTML. Cette fonction peut être utilisée pour créer des menus déroulants, des zones pliables et d'autres composants interactifs. Il fonctionne en changeant la visibilité des éléments chaque fois qu'il est déclenché. Si l'élément est visible, il devient caché et vice versa.

Comment utiliser la fonction de bascule jQuery dans mon code?

Pour utiliser la fonction de bascule jQuery, vous devez sélectionner l'élément HTML auquel la fonction doit être appliquée, puis appeler la méthode .toggle(). Voici un exemple de base:

$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});

Dans cet exemple, l'élément de paragraphe est masqué et affiché chaque fois que le bouton est cliqué.

Comment déterminer l'état actuel de l'élément basculé?

Pour déterminer l'état actuel de l'élément basculé, vous pouvez utiliser le sélecteur :visible ou :hidden dans jQuery. Voici un exemple:

if ($("p").is(":visible")) {
  // 段落可见
} else {
  // 段落隐藏
}

Dans cet exemple, la méthode .is() est utilisée pour vérifier si le paragraphe est actuellement visible ou caché.

Puis-je utiliser la fonction de bascule jQuery avec l'animation?

Oui, vous pouvez utiliser la fonction JQuery Toggle avec des animations. En transmettant les paramètres à la méthode .toggle(), vous pouvez contrôler la vitesse de l'animation, et même ajouter une fonction de rappel qui est exécutée une fois l'animation terminée. Voici un exemple:

$("p").toggle("slow", function(){
  // 动画完成。
});

Dans cet exemple, le paragraphe sera caché et affiché avec une animation lente. Une fois l'animation terminée, la fonction de rappel sera exécutée.

Quelle est la différence entre la fonction de bascule jQuery et la propriété d'affichage CSS?

à la fois la fonction de bascule jQuery et l'attribut d'affichage CSS contrôlent la visibilité des éléments HTML, mais ils fonctionnent légèrement différemment. La propriété d'affichage CSS contrôle la disposition des éléments de la page. Lorsque la propriété d'affichage d'un élément est réglée sur "Aucun", l'élément est supprimé de la disposition et les éléments environnants remplissent leur espace. D'un autre côté, la fonction de bascule de jQuery modifie simplement la visibilité des éléments sans affecter la disposition de la page.

Puis-je utiliser la fonction de bascule jQuery pour basculer entre deux fonctions?

Oui, vous pouvez basculer entre deux fonctions à l'aide de la fonction JQuery Toggle. Cela se fait en passant deux paramètres de fonction à la méthode .toggle(). Voici un exemple:

$("button").toggle(
  function() {
    $("p").hide();
  },
  function() {
    $("p").show();
  }
);

Dans cet exemple, la première fonction est exécutée lorsque le bouton est cliqué, cachant le paragraphe. La deuxième fonction est exécutée la deuxième fois que le bouton est cliqué, montrant le paragraphe.

Comment créer un menu déroulant à l'aide de la fonction JQuery Toggle?

Pour créer un menu déroulant à l'aide de la fonction JQuery Toggle, vous pouvez afficher et masquer la liste des liens lorsque le bouton est cliqué. Voici un exemple de base:

$(this).is(":hidden");

Dans cet exemple, la classe .dropdown-menu est utilisée pour sélectionner le menu déroulant. Le menu est masqué et affiché chaque fois que le bouton est cliqué.

Puis-je utiliser la fonction de bascule jQuery avec d'autres méthodes jQuery?

Oui, vous pouvez utiliser la fonction de bascule jQuery avec d'autres méthodes jQuery. Par exemple, vous pouvez utiliser la méthode .css() pour modifier son style lors de la commutation des éléments. Voici un exemple:

if (this.data('state') === 'closed') {
    $('.' + toggleBtnClass).text(moreText);
    _this.data('state', 'open'); /* 添加数据以存储状态 */
} else {
    $('.' + toggleBtnClass).text(lessText);
    _this.data('state', 'closed'); /* 添加数据以存储状态 */
}

Dans cet exemple, chaque fois que le bouton est cliqué, le paragraphe est masqué et affiché et sa couleur de texte change en rouge.

Quelles versions des fonctions de basculement de prise en charge jQuery?

jQuery 1.0 et ultérieurement de la fonction de bascule jQuery. Cependant, la syntaxe et la fonctionnalité de la méthode .toggle() ont été modifiées dans différentes versions de jQuery. Il est toujours recommandé de vérifier la version de la documentation JQuery que vous utilisez pour s'assurer que la méthode .toggle() est utilisée correctement.

Puis-je basculer entre plus de deux états en utilisant la fonction de bascule jQuery?

La fonction de bascule jQuery est conçue pour basculer entre deux états: visible et caché. Si vous devez basculer entre plus de deux états, vous devez écrire du code personnalisé ou utiliser des plugins. Cependant, vous pouvez utiliser la méthode .toggle() sur différents éléments plusieurs fois pour créer des composants interactifs complexes.

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!