J'essaie d'avoir plusieurs listes déroulantes sur mon site Web. Le problème est que chaque fois que je cliquais sur la deuxième liste déroulante , la première liste déroulante était ouverte. J'ai obtenu les codes de w3school et honnêtement, je ne les comprends pas, mais cela fonctionne donc ça me convenait jusqu'à ce que cela se produise,
Voici mes codes.
<html>
<title> Dropdown </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/icons/favicon.ico" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<body>
<div class="sidenav">
<h3> DROPDOWNS </h3> <br>
<button onclick="myAccFunc('demoAcc')" href="javascript:void(0)" id="myBtn"> Dropdown I
</button>
<div id="demoAcc" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">A</button>
<button class="w3-bar-item w3-button">B</button>
<button class="w3-bar-item w3-button">C</button>
<button class="w3-bar-item w3-button">D</button>
</div><br>
<button onclick="myAccFunc('demoAcc-2')" href="javascript:void(0)" id="myBtn"> Dropdown II
</button>
<div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">1</button>
<button class="w3-bar-item w3-button">2</button>
<button class="w3-bar-item w3-button">3</button>
<button class="w3-bar-item w3-button">4</button>
</div><br>
<button onclick="myAccFunc('demoAcc-3')" href="javascript:void(0)" id="myBtn"> Dropdown III
</button>
<div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">+</button>
<button class="w3-bar-item w3-button">-</button>
<button class="w3-bar-item w3-button">/</button>
<button class="w3-bar-item w3-button">=</button>
</div>
</div>
<script>
function myAccFunc(elemId) {
var x = document.getElementById(elemId);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
4 Réponses :
PROBLÈME:
Votre fonction ouvre le même ID de propriété demoAcc pour tous
SOLUTION : vous devrez spécifier des ID uniques pour chaque élément différent, comme:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<div class="sidenav">
<h3> DROPDOWNS </h3> <br>
<button onclick="myAccFunc('demoAcc')" href="javascript:void(0)" id="myBtn"> Dropdown I
</button>
<div id="demoAcc" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">A</button>
<button class="w3-bar-item w3-button">B</button>
<button class="w3-bar-item w3-button">C</button>
<button class="w3-bar-item w3-button">D</button>
</div><br>
<button onclick="myAccFunc('demoAcc-2')" href="javascript:void(0)" id="myBtn-2"> Dropdown II
</button>
<div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">1</button>
<button class="w3-bar-item w3-button">2</button>
<button class="w3-bar-item w3-button">3</button>
<button class="w3-bar-item w3-button">4</button>
</div><br>
<button onclick="myAccFunc('demoAcc-3')" href="javascript:void(0)" id="myBtn-3"> Dropdown III
</button>
<div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">+</button>
<button class="w3-bar-item w3-button">-</button>
<button class="w3-bar-item w3-button">/</button>
<button class="w3-bar-item w3-button">=</button>
</div>
</div>Ensuite, vous devez mettre à jour votre fonction pour recevoir une valeur:
function myAccFunc( elemId ) {
var x = document.getElementById( elemId );
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}Ensuite sur chaque bouton vous définissez l'ID div que vous souhaitez ouvrir , comme:
<button onclick="myAccFunc('demoAcc')" ... > Dropdown I </button>
<button onclick="myAccFunc('demoAcc-2')" ... > Dropdown II </button>
<button onclick="myAccFunc('demoAcc-3')" ... > Dropdown III </button>
Voir l'extrait:
function myAccFunc( elemId ) {
var x = document.getElementById( elemId );
...
}
<div id="demoAcc" class="w3-hide w3-padding-large w3-medium">...</div> <div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium">...</div> <div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium">...</div>
J'ai modifié mes codes et appliqué votre réponse mais j'ai eu une erreur. Veuillez vous référer à mon message ci-dessus pour que vous puissiez le voir. Merci.
J'ai ajusté votre extrait de code pour transmettre l'ID de l'élément à la fonction.
<html>
<title> Dropdown </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<body>
<div class="sidenav">
<h3> DROPDOWNS </h3> <br>
<button onclick="myAccFunc('demoAcc1')" href="javascript:void(0)" id="myBtn"> Dropdown I
</button>
<div id="demoAcc1" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">A</button>
<button class="w3-bar-item w3-button">B</button>
<button class="w3-bar-item w3-button">C</button>
<button class="w3-bar-item w3-button">D</button>
</div><br>
<button onclick="myAccFunc('demoAcc2')" href="javascript:void(0)" id="myBtn"> Dropdown II
</button>
<div id="demoAcc2" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">1</button>
<button class="w3-bar-item w3-button">2</button>
<button class="w3-bar-item w3-button">3</button>
<button class="w3-bar-item w3-button">4</button>
</div><br>
<button onclick="myAccFunc('demoAcc3')" href="javascript:void(0)" id="myBtn"> Dropdown III
</button>
<div id="demoAcc3" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">+</button>
<button class="w3-bar-item w3-button">-</button>
<button class="w3-bar-item w3-button">/</button>
<button class="w3-bar-item w3-button">=</button>
</div>
</div>
<script>
function myAccFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
Ceci peut être fait avec du CSS pur.
Dans cet exemple, il y a des éléments juste pour avoir le style de bouton par défaut du navigateur. Pour laisser les cases à cocher recevoir les clics de souris, nous les désactivons sur les boutons avec pointer-events: none . Vous pouvez styliser les balises pour qu'elles ressemblent également à des boutons, vous n'avez donc pas du tout besoin de boutons.
L'astuce consiste à définir l ' affichage code> La propriété CSS du frère suivant des cases à cocher dépend de l'état coché.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<div class="sidenav">
<h3> DROPDOWNS </h3> <br>
<button> Dropdown I </button>
<div class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">A</button>
<button class="w3-bar-item w3-button">B</button>
<button class="w3-bar-item w3-button">C</button>
<button class="w3-bar-item w3-button">D</button>
</div><br>
<button> Dropdown II </button>
<div class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">1</button>
<button class="w3-bar-item w3-button">2</button>
<button class="w3-bar-item w3-button">3</button>
<button class="w3-bar-item w3-button">4</button>
</div><br>
<button> Dropdown III </button>
<div class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">+</button>
<button class="w3-bar-item w3-button">-</button>
<button class="w3-bar-item w3-button">/</button>
<button class="w3-bar-item w3-button">=</button>
</div>
</div>
document.addEventListener('DOMContentLoaded', () =>
document.querySelectorAll('.sidenav > button').forEach(el =>
el.addEventListener('click', ev =>
ev.target.nextElementSibling.classList.toggle('w3-hide')
)));
Si vous voulez vraiment le faire en JavaScript, vous devriez utiliser la méthode moderne en ajoutant des écouteurs d'événements au lieu de l'attribut onclick .
Au lieu de manipuler des chaînes, utilisez la méthode classList.toggle () .
Vous n'avez pas du tout besoin d'attributs id :
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<div class="sidenav">
<h3> DROPDOWNS </h3> <br>
<label for="myBtn-1"><button> Dropdown I </button></label>
<input type="checkbox" id="myBtn-1">
<div id="demoAcc-1" class="w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">A</button>
<button class="w3-bar-item w3-button">B</button>
<button class="w3-bar-item w3-button">C</button>
<button class="w3-bar-item w3-button">D</button>
</div><br>
<label for="myBtn-2"><button> Dropdown II </button></label>
<input type="checkbox" id="myBtn-2">
<div id="demoAcc-2" class="w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">1</button>
<button class="w3-bar-item w3-button">2</button>
<button class="w3-bar-item w3-button">3</button>
<button class="w3-bar-item w3-button">4</button>
</div><br>
<label for="myBtn-3"><button> Dropdown III </button></label>
<input type="checkbox" id="myBtn-3">
<div id="demoAcc-3" class="w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">+</button>
<button class="w3-bar-item w3-button">-</button>
<button class="w3-bar-item w3-button">/</button>
<button class="w3-bar-item w3-button">=</button>
</div>
</div>
.sidenav>label>button {
pointer-events: none;
}
.sidenav>input[type="checkbox"],
.sidenav>input[type="checkbox"]+div {
display: none;
}
.sidenav>input[type="checkbox"]:checked+div {
display: block;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<div class="sidenav">
<h3> DROPDOWNS </h3> <br>
<button onclick="myAccFunc('demoAcc')" href="javascript:void(0)" id="myBtn"> Dropdown I
</button>
<div id="demoAcc" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">A</button>
<button class="w3-bar-item w3-button">B</button>
<button class="w3-bar-item w3-button">C</button>
<button class="w3-bar-item w3-button">D</button>
</div><br>
<button onclick="myAccFunc('demoAcc-2')" href="javascript:void(0)" id="myBtn-2"> Dropdown II
</button>
<div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">1</button>
<button class="w3-bar-item w3-button">2</button>
<button class="w3-bar-item w3-button">3</button>
<button class="w3-bar-item w3-button">4</button>
</div><br>
<button onclick="myAccFunc('demoAcc-3')" href="javascript:void(0)" id="myBtn-3"> Dropdown III
</button>
<div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">+</button>
<button class="w3-bar-item w3-button">-</button>
<button class="w3-bar-item w3-button">/</button>
<button class="w3-bar-item w3-button">=</button>
</div>
</div>
Les attributs d'identifiant HTML doivent contenir des valeurs uniques.
document.getElementById ("elemId");Vous souhaitez utiliser le paramètre de fonctiondocument.getElementById (elemId);au lieu d'une chaîne littérale.Pourquoi l'essayer de cette façon? Il existe des listes déroulantes
intégrées dans les navigateurs et votre look'n'feel scripté peut être implémenté en utilisant du CSS pur.Cela aide vraiment! Je vous remercie!! @ Clone de Quasimodo