Jquery .click() sur les titres ne fonctionne pas

Question

Alors, j'ai un problème. Dans l'un de mes projets, je veux inclure une fonction slideToggle pour un panneau, sur le clic d'un titre. Je veux essentiellement ceci.

https://jsfiddle.net/abrch86f/

Le problème est que lorsque je clique sur le titre (un h3), il ne se passe rien, et pour vérifier, j'ai également ajouté un message d'alerte dans la fonction de clic. Je cherche essentiellement les erreurs courantes qui pourraient causer cela. JQuery est définitivement chargé, j'utilise toujours un message d'alerte lors du chargement du document pour vérifier. Voici mon code

JQuery

$('h3').click(function(){
  alert("Cela fonctionne!");
  $('.content').slideToggle();
});

HTML

 Engagez des soldats

            Épéiste - Coût 70 Minerai
            Avant-garde - Coût 90 Minerai
            Archer - Coût 125 Minerai
            Chevalier - Coût 200 Minerai

La raison pour laquelle j'ai inclus ma balise div de panneau gauche est que je ne suis pas sûr si la z-index a quelque chose à voir avec cela, mais j'ai un pressentiment. Est-ce que l'affichage peut poser problème? Je ne sais pas pourquoi cela le ferait car je ne l'ai pas du tout modifié. Encore une fois, je souligne que je cherche juste des choses qui pourraient empêcher que cela fonctionne. Si vous pensez pouvoir m'aider directement et avez besoin de plus d'informations, demandez simplement.

Merci!

Answer 1

Je pense que c'est ce dont vous avez besoin. Veuillez me faire savoir si cela fonctionne pour vous.

$(document).ready(function(){
$('h3').click(function(){
  $('.content').slideToggle();
});
});

.content{
display:none;
}

 Engager des soldats

            Épéiste - Coût 70 Minerai
            Avant-garde - Coût 90 Minerai
            Archer - Coût 125 Minerai
            Chevalier - Coût 200 Minerai

Answer 2

Mon problème était que mon h3 que je ciblais pour cliquer était caché par un autre div. Merci pour l'explication de @josephting, j'ai dû ajuster mon z-index pour être plus élevé comme ceci :

h3 {
  z-index: 2;
}

Une bonne façon de vérifier si vos éléments sont bloqués par autre chose est d'utiliser cette fonction expliquée par @junkfoodjunkie qui imprime dans la console log l'élément que vous avez cliqué.

$(document).click(function(e){ console.log(e.target); });

Ainsi, en ajoutant cette déclaration à mon CSS, mon problème a été résolu. N'oubliez pas que si vous avez utilisé des valeurs de z-index plus élevées auparavant, vous devrez peut-être les augmenter en fonction de ce que votre titre est devant.