11521 sujets

JavaScript, DOM et API Web HTML5

Afficher/masquer une liste <li>

Bonjour,
J'ai une liste 
<li>
avec sous chaque ligne une sous-liste qui s'affiche en cliquant sur une ligne de la liste principale.
Un exemple sera surement plus clair :
<!DOCTYPE html>
<html lang="fr" class="fond_ecran_dev">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="./favicon.ico">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
    <title>Essai</title>
    <style>
        a {text-decoration: none;}
        li {list-style-type: none;}
        .liste-haute {display: block;cursor: pointer;}
        .ul-masque {display: none;}
    </style>
</head>
<body>    
    <main class="col-xs-12">
        <ul class="liste-haute">
            <li>
                <a href="#" class="liste" onclick="listeVisible(3, 1)">
                    <span class="ligne-titre">Liste 1</span>
                    <ul id="liste-1" class="ul-masque">
                        <li>Ligne x1</li>
                        <li>Ligne x2</li>
                        <li>Ligne x2</li>
                    </ul>
                </a>
            </li>
            <li>
                <a href="#" class="liste" onclick="listeVisible(3, 2)">
                    <span class="ligne-titre">Liste 2</span>
                    <ul id="liste-2" class="ul-masque">
                        <li>ligne Y1</li>
                        <li>ligne Y2</li>
                        <li>ligne Y3</li>
                        <li>ligne Y4</li>
                        <li>ligne Y5</li>
                        <li>ligne Y6</li>
                    </ul>
                </a>
            </li>
            <li>
                <a href="#" class="liste" onclick="listeVisible(3, 3)">
                    <span class="ligne-titre">Liste 3</span>
                    <ul id="liste-3" class="ul-masque">
                        <li>ligne Z1</li>
                        <li>ligne Z2</li>
                        <li>ligne Z3</li>
                        <li>ligne Z4</li>
                    </ul>
                </a>
            </li>
        </ul>
    </main>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
    function listeVisible(total, n) {
        for (let index = 1; index <= total; index++) {
            document.getElementById('liste-' + index).style.display = "none";
        }
        var idnom = 'liste-' + n;
        document.getElementById(idnom).style.display = "block";
    };
</script>
</body></html>

Ce code fonctionne mais il doit y avoir plus simple. Je ne suis pas spécialement doué en JS.
Je suis preneur d'idées pour simplifier. Merci
Modifié par phiper (18 Feb 2023 - 17:14)
Bonjour,
Il y a effectivement beaucoup mieux à faire du point de vue JS. Mais pour cette fonction précise, sans aucun effets de style sur l'ouverture/fermeture des éléments, plutôt que d'utiliser JavaScript j'utiliserais les éléments HTML details/summary.

Exemple
Modifié par Olivier C (18 Feb 2023 - 09:40)
Meilleure solution
Bonjour,
Merci niuxe, j'ai corrigé.
Olivier C je ne connaissais pas ces 2 éléments HTML. C'est intéressant et ça évite l'utilisation de JavaScript.
Prévenir un modérateur
Répondre au sujet
Aller à