Le menu déroulant est une liste des actions contextuelles qui apparaissent suite au clic sur un bouton.
Documentation : Figma | Développeur
Langage: HTML
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-ft-dropdown="dropdown-example" id="legend-id" type="button">
<span class="btn-content">Plus d'actions</span>
<span aria-hidden="true" class="icon icon-chevron-sm-d"></span>
</button>
<div id="dropdown-example" class="dropdown-menu dropdown-md with-footer">
<form>
<div class="dropdown-list">
<div role="group" aria-labelledby="legend_729103090">
<div class="legend-container">
<p class="form-legend" id="legend_729103090">Légende du groupe</p>
</div>
<div class="form-check with-checked-bg">
<input checked="checked" class="form-check-input" id="form-checkbox_679778381" name="form-checkbox_289945289" type="checkbox" value="checkbox-value_741166514">
<label class="form-check-label" for="form-checkbox_679778381">
Libellé de l'élément</label>
</div>
<div class="form-check with-checked-bg">
<input class="form-check-input" id="form-checkbox_290728253" name="form-checkbox_289945289" type="checkbox" value="checkbox-value_25552265">
<label class="form-check-label" for="form-checkbox_290728253">
Libellé de l'élément</label>
</div>
<div class="form-check with-checked-bg">
<input class="form-check-input" id="form-checkbox_399529476" name="form-checkbox_289945289" type="checkbox" value="checkbox-value_161539827">
<label class="form-check-label" for="form-checkbox_399529476">
Libellé de l'élément</label>
</div>
<div class="form-check with-checked-bg">
<input class="form-check-input" id="form-checkbox_402348417" name="form-checkbox_289945289" type="checkbox" value="checkbox-value_129742380">
<label class="form-check-label" for="form-checkbox_402348417">
Libellé de l'élément</label>
</div>
</div>
</div>
<div class="dropdown-footer">
<button class="btn btn-primary" id="button_33182152" type="button">
<span class="btn-content">Appliquer</span>
</button>
</div>
</form>
</div>
</div>
// L'aperçu n'est pas disponible pour les dépendances externes
window.addEventListener('load', function () {
/**
* Désactivation du clic sur les input disabled
*/
// On liste les input disabled
const disabledInputs = document.querySelectorAll('[aria-disabled="true"]');
for (const input of disabledInputs) {
// Pour chaque input on empêche le click
input.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
});
// Pour chaque label associé, on empêche le click
const label = document.querySelector('[for="' + input.id + '"]');
if (label) {
document.querySelector('[for="' + input.id + '"]').addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
});
}
}
});