11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

utilisant Boostrap3 pour un projet j'ai intégré le megamenu Yamm. Afin d'avoir un effet plutôt sympa j'ai ajouté la ligne de javascript :

$('.dropdown').click(function() {
$('.dropdown-menu', this).slideToggle(250);
return false;
});


Seulement petit soucis, si je clique sur un élément dropdown 2 alors qu'un autre est déjà actifv (dropdown 1), il s'affiche derrière le premier. Du coup ça se supperpose. Comment faire en sorte qu'un clic sur le dropdown 2 ferme mon dropdown 1 automatiquement ?

Merci pour vos retours, je nage un peu sur la question.
Bonjour lelly,

A priori vous n'avez pas prévu de faire disparaître les autres sous-menus déjà ouverts.
Pour cela le code complété suivant devrait vous donner une première solution :
$('.dropdown').click(function() {
    $('.dropdown .dropdown-menu').hide(); // disparition de tous les sous-menus
    $('.dropdown-menu', this).slideToggle(250);
    return false;
});

Evidemment, on peut largement affiner le comportement général.
Si besoin est, transmettez votre code HTML pour avoir une idée plus précise du DOM sur lequel interviendrait le jQuery.

Bonne continuation et bon code...