J'essaie de faire une dynamique d'accordéon avec PHP WordPress. Mais par quelle source j'ai trouvé que l'accordéon fonctionne correctement dans HTML. Mais quand j'essaie de le rendre dynamique, l'icône géniale de police ne fonctionne pas correctement. L'icône géniale de police répète deux fois lors de leur expansion. Vous pouvez voir ci-dessous image
p>
Le code est ici https://jsfiddle.net/nriddhi/zyj3ck5t/ p>
code JS : P>
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li div").each(function(i,el) {
if($(el).parent().is(current_li)) {
$(el).prev().toggleClass("plus fa-minus");
$(el).slideToggle();
} else{
$(el).prev().removeClass("plus fa-minus");
$(el).slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus");
$('.accordion li > div').first().show().addClass("plus");
3 Réponses :
Dans votre HTML, vous avez la classe Enlevez simplement les JS supplémentaires ci-dessous votre gestionnaire d'événements prend soin de la la duplication et énonçant explicitement une addition / retrait de maintenant , Si vous souhaitez faire chaque déclaration des icônes de déclenchement de l'élément d'accordéon 100% dynamique, vous devez fournir un code supplémentaire pour présenter la manière dont vous générez lesdits éléments, mais dans le contexte des informations que vous avez fournies, Ceci est la solution appropriée. p> p> fa-plus code> déjà appliquée à chaque déclencheur d'objet d'accordéon. Ensuite, dans votre JavaScript, vous réappliquez les classes plus fa-plus code> à chaque déclencheur, créant ainsi la duplication de la classe. plus fa-minus code> ou fa-plus code> à chaque élément cliqué gérera les modifications de modification. p>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon plus fa-minus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div class="plus">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Bonne prise @chrishnappy. J'ai corrigé ma réponse ci-dessus.
Pour que cela fonctionne, vous devez:
.FA-plus code> lorsqu'un élément est cliqué sur li>
- Supprimer
.FA-plus code> classe au début. LI>
ul> js code: p> xxx pré> extrait: p>
p>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom jQuery Accordion</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="accordion">
<h2>Custom jQuery Accordion</h2>
<ul>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply dummy text of the Lorem</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
<li>
<h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Je ne pense pas que je comprends bien votre question, mais peut-être c'est ce que vous voulez: https: // jsfiddle .NET / 9P3MX52K /
$(".accordion li h5").click(function () {
var current_li = $(this).parent();
$(".accordion li").each(function(i,el) {
if($(el).is(current_li)) {
if (current_li.find('> h5').hasClass('plus')) {
$(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
$(el).find('> div').removeClass('plus').slideUp();
} else {
$(el).find('> h5').removeClass("fa-plus").addClass("plus fa-minus");
$(el).find('> div').addClass('plus').slideDown();
}
} else{
$(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
$(el).find('> div').removeClass('plus').slideUp();
}
});
});
$('.accordion li > div').hide();
$('.accordion li h5').first().removeClass("fa-plus").addClass("plus fa-minus");
$('.accordion li > div').first().show().addClass("plus");
Comment est-ce une question "php"?
L'original HTML est:
class = "icône fa-plus" . Ensuite, vous ajoutezaddClass ("plus fa-minus") . Quel résultat attendez-vous de cela?Lorsque je le fais une dynamique, l'expansion de la police de temps d'expiration géniale icône ne fonctionne pas correctement, il vient parfois la première Fa-plus, parfois Fa-Minus, comment garder un nom d'icône et corriger un, y a-t-il une idée?