J'ai cherché un moment et j'ai essayé quelques choses différentes - mais car la vie de moi ne peut pas sembler obtenir ce travail.
dans le Codepen ci-dessous est un exemple de case à cocher personnalisée avec une DIV basculée pour montrer / Cachée Lorsque la case à cocher est cochée et une case à cocher normale lorsque la fonctionnalité d'effondrement et la case à cocher fonctionnent comme prévu P>
ne peuvent pas comprendre pourquoi la case à cocher personnalisée ne change pas les états à cocher - Si je supprimai la case-butée de données La case à cocher personnalisée fonctionne, mais dès que la bascule de données est introduite échoue. P>
codepen.io/anon/pen/JzYOpZ
3 Réponses :
Vous devez modifier la propriété Le CSS J'ai changé suivait p> et pendant que la case à cocher est chargée initialement, j'ai ajouté la classe effondrée à la case comme suit P> remplir code> du SVG en utilisant différentes classes
Voici le stylo mis à jour
https://codepen.io/anon/pen/pyjppk <label class="cbx collapsed" for="test" data-toggle="collapse" href="#collapseOne">
Merci mais ne semble pas que cela corrige le problème de la racine que la case à cocher ne modifie pas les états, si vous prenez l'affichage: Aucun; hors de la boîte d'entrée, vous le verrez que cela ne change pas.
Je pensais que le problème était juste avec l'interface utilisateur avec la case à cocher personnalisée
Aucun problème! Ont mis à jour la question pour le rendre plus clair, merci même :)
Modification HTML: P>
<script type="text/javascript" src="yourScript.js"></script>
Les solutions JavaScript vont bien, mais si le contenu est généré de manière dynamique et que je ne connais pas l'identifiant jusqu'à ce que la page soit rendue - Comment puis-je modifier la fonction ci-dessus pour obtenir cet identifiant? Merci pour la réponse au fait!
Vous pouvez transmettre l'identifiant comme un argument de la fonction, c'est-à-dire keillite (id), puis remplacez "Test" avec ID dans le script. De cette façon, lorsque vous appelez la fonction, vous pouvez transmettre l'ID généré.
@ Lampes92 Faites-moi savoir si vous trouvez une solution.
Je ne sais pas qu'il fonctionnera, car je clique sur l'étiquette (entrée avec l'ID est défini sur l'affichage: Aucun; Pour effectuer des travaux de coiffage de la case à cocher personnalisés) - Donc, aucun identifiant ne sera passé dans l'événement de clic, sauf si je suis mal compris? Que je pourrais être aussi im a js novice: D
Hey Jack! Je l'ai enfin travaillé, la réponse est ci-dessous mais merci pour votre aide
C'est bon d'entendre, pas de problème.
OK, la réponse à cela était effectivement simple
Au lieu d'utiliser l'attribut href pour cibler la DIV que vous souhaitez effondrer, vous devez vous assurer que vous utilisez "Target de données"
J'ai mis à jour le Codepen dans la question pour le refléter.