Dropdown: Avec un bouton de tri

Choix de l'univers FT

Dropdown Menu déroulant

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-tertiary light btn-sort dropdown-toggle" data-ft-dropdown="dropdown-example" id="button_867839234" type="button">
        <span class="btn-content"><span class="prefix">Trier par :</span>&nbsp;
            Pertinence</span>
        <span aria-hidden="true" class="icon icon-chevron-sm-d"></span>
    </button>

    <div id="dropdown-example" class="dropdown-menu dropdown-md">
        <ul class="dropdown-list">

            <li>
                <a class="dropdown-item" href="#">
                    Pertinence
                </a>
            </li>

            <li>
                <a class="dropdown-item" href="#">
                    Ordre alphabétique
                </a>
            </li>

            <li>
                <a class="dropdown-item" href="#">
                    Date
                </a>
            </li>

        </ul>
    </div>
</div>
  • URL Preview : /js/disabled-a11y.js
  • Chemin d'accès : public/js/disabled-a11y.js
  • Taille : 824 Bytes
  • Contenu : 
    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();
            });
        }
    }
});