11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Lien non cliquable sur display:none multiples

Bonjour à tous,

Après une semaine de recherches actives je me décide à soumettre mon cas car je ne parviens décidément pas à trouver.

Mon problème est simple à la base :
- une suite d'articles HTML comprenant un nombre non-prédéfini de paragraphes
- chaque paragraphe composé d'un lien cliquable <a> et d'un texte <p> que je souhaite faire apparaître et disparaître en cliquant sur le <a>
- Quelques éléments positionnés sur la même ligne placés dans un <aside>

Ça ressemble à ça :


<article>
    <h2>Titre Article</h2>
    <div class="conteneur">
        <li><a href="#" class="sujet" id="s1">Lien cliquable</a></li>
        <p class="cache" id="c1">blablabla</p>
        <aside><meter value="41" min="0" max="100" low="30" high="70" optimum="100"></meter></aside>
    </div>
    <div class="conteneur">
        <li><a href="#" class="sujet" id="s2">Lien cliquable</a></li>
        <p class="cache" id="c2">blablabla</p>
        <aside><meter value="41" min="0" max="100" low="30" high="70" optimum="100"></meter></aside>
    </div>
</article>


Si j'applique du JS sur UN SEUL élément pour le modifier dynamiquement, ça marche :


var s1 = document.getElementById("s1");
var c1 = document.getElementById("c1");
s1.addEventListener("click", function(){
    if (window.getComputedStyle(c1).getPropertyValue("display") == "none"{
        c1.style.display = "block";
    } else {
        c1.style.display = "none";
    }
});



#c1{
    display : none;
}


Mais dès que j'essaie de m'attaquer à plusieurs éléments, les liens deviennent du texte et il est impossible de faire apparaître les paragraphes des balises <p>
C'est à dire que dès lors que les paragraphes concernés sont au nombre de 2 ou + sur "display:none", les balises <a> deviennent non-cliquables.

J'ai essayé :
- les changement de classes CSS via JS
- les transitions CSS
- les modifications via JS par les classes et par l'id
- jQuery
le tout avec les propriété "visibility" et "display", mais en vain...

Quelqu'un aurait-il une solution de génie pour me tirer de ce marécage ? Smiley confused

Merci par avance !
Modifié par Tatsumaru (06 Apr 2017 - 00:35)
Voilà une solution avec jQuery:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        
        <style>
            #c1{
                display : none;
            }
        </style>
    </head>
    <body>
        <article>
    <h2>Titre Article</h2>
    <div class="conteneur">
        <li><a href="#" class="sujet" id="s1">Lien cliquable</a></li>
        <p class="cache" id="c1">blablabla</p>
        <aside><meter value="41" min="0" max="100" low="30" high="70" optimum="100"></meter></aside>
    </div>
    <div class="conteneur">
        <li><a href="#" class="sujet" id="s2">Lien cliquable</a></li>
        <p class="cache" id="c2">blablabla</p>
        <aside><meter value="41" min="0" max="100" low="30" high="70" optimum="100"></meter></aside>
    </div>
        </article>
        <script>
        var s1 = document.getElementById("s1");
        var c1 = document.getElementById("c1");
        /*
        s1.addEventListener("click", function(){
            if (window.getComputedStyle(c1).getPropertyValue("display") == "none"){
                c1.style.display = "block";
            } else {
                c1.style.display = "none";
            }
        });*/
        $("body").on("click",".sujet", function() {
            if ($(this).parents(".conteneur:first").find(".cache").css("display") == "none"){
                $(this).parents(".conteneur:first").find(".cache").css("display", "block");
            } else {
                $(this).parents(".conteneur:first").find(".cache").css("display", "none");
            }
        });
    </script>
    </body>
    
</html>


Bonne continuation
Meilleure solution
Sujet clos
Aller à