J'ai un site en cours d'exécution sur WordPress Modèle. J'ai collé dans l'ensemble du code de l'accordéon de W3school (ici c'est HTTPS: //www.w3schools .com / howto / howto_js_accordion.asp ). Ma version ne fonctionne pas de manière inattendue.
J'ai inclus des lignes CSS dans le fichier MAIN.CSS: P> J'ai ajouté le code HTML sur la page via la page La console d'administration: p> suivante J'ai créé un fichier scripts.js et l'a ajouté dans le modèle avec contenu du fichier scripts.js: p> puis rien ne se passe sur le bouton Accordéon: Non Erreurs JS dans la console, aucun contenu de l'accordéon ne montre. Comment pourrais-je le faire fonctionner? P> upd 1
Noms de classe modifiés aux uniques
JS P> wp_enqueue_script code> dans fonctions.php. Donc, je peux le voir charger lorsque le code de page est affiché. p> var nikpanel = this.nextElementSibling;
3 Réponses :
Votre erreur est que vous avez mélangé la version de base (non animée) avec l'animation One.
pour la version de base retirez la hauteur mineure: 0; et remplacez-le par affichage: Aucun. En effet, votre max-hauteur est 0 et votre code JavaScript modifie la valeur d'affichage de 'Aucun' sur 'Bloquer' et vice-versa en cliquant. Par conséquent, l'élément devient un élément de bloc, cependant, la hauteur est limitée par max-hauteur: 0. P>
Votre CSS devrait être: p> ou vous pouvez simplement modifier votre JS pour modifier la valeur max-hauteur au lieu de la valeur d'affichage. P > var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
dans votre CSS remplace avec Je viens de tester votre code et que ce remplacement obtient son travail
Oui, il fonctionne sur des simulateurs mais pas dans le modèle
Ensuite, il pourrait s'agir d'une classe WordPress qui est également nommée sous forme de panneau. Essayez votre classe de panneau pour dire Nikpanel sur vos codes CSS et HTML
Si cela ne fonctionne toujours pas, essayez de changer également les classes d'accordéon et actifs sur votre CSS et HTML pour dire Nikaccordion et Nikactive respectivement
Et sur votre javascript, c'est----être accordéon à Nikaccordion et actif à NikActive
toujours ne fonctionne pas. J'ai mis à jour le message avec ces modifications sous la ligne "Upd 1"
Ma dernière tentative. Avec ces changements, j'ai ajouté le document.Read Lines au JavaScript et cela n'a pas fonctionné. Donc, je me demande simplement si vous avez toujours le document.Ready Lines (I.e 1ère ligne et dernière ligne) sur votre code WordPress
J'ai ajouté "document.ready" ligne. Maintenant, ce code JS ajoute de la classe "NikActive" aux boutons. Mais la propriété d'affichage est toujours inchangée. Et cette erreur apparaît dans la console: Company TypeError: Impossible de lire la propriété 'Style' de NULL à HTMLButtonElement.
L'élément "this.nextelementsibling" pour une raison quelconque renvoie NULL sur mon site et [Objet HTMLDivelement] sur le simulateur
Vient de découvrir que WordPress Console ajoute des balises P à mon code. Il les met là où ils ne peuvent pas être comme s'il n'y a pas d'espace au code source, mais après que Rendre p-tags apparaisse
Bonjour. J'impliquais que cela ne fonctionnera pas si le document.Ready Lines est sur votre JavaScript WordPress. Sur le code W3Schools, vous le verrez ne contient pas ces deux lignes
J'ai découvert que WordPress ajoute des balises P à mon code HTML ainsi que le script JS a traité les étiquettes Phantom P en tant que balises cible et essayé d'appliquer des actions à leur.
J'ai désactivé cette ajout de: dans mes fonctions.php
Si cet ajustement fait fonctionner alors c'est génial
Ne pas poser une question stupide, mais comprenez-vous une bibliothèque JavaScript dans votre code? Si vous n'êtes pas alors, le script JS de W3 n'a aucun point de référence et ne ferez rien.
Voici un lien de violon qui a une bibliothèque JS en cours d'exécution. Le code est tout le stock W3 Exemple: jsfiddle.net/rcq5kb7n
Comme @ HispowerLelisover9000 demande, utilisez-vous la balise de script pour inclure le fichier JS? Sinon: développeur.mozilla.org/en-us/docs / Web / html / élément / script
@Martinm, j'ai cette ligne dans le code de page
Dans votre JavaScript, supprimez la première ligne I.E $ (document) .Ready (fonction (fonction () {et la dernière ligne I.E}); et dites-nous ce qui se passe
@ HispowerLelisover9000, j'ai cette ligne Est-ce la bibliothèque dont vous parlez?
@ Hans-König, rien ne s'est passé
Pourrait-il être que les scripts.js est inclus plus haut que main.js?
Avez-vous testé la solution que je viens de poster?
@ Hans-König j'ai testé. rien ne change pour moi