Problème dropdown déroulant

Par Motel, il y a 9 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code, je cherche à afficher les trois menu déroulant du dropdown sur une même page le problème c'est que j'en ai qu'une qui fonctionne et sur les autres quand je clique dessus rien ne se passe voillà mon code

Le code HTML

<div id="dpd" class="wrapper-dropdown" tabindex="1"> <span>Ville</span> <ul class="dropdown"> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </div> <div id="dpd" class="wrapper-dropdown" tabindex="1"> <span>Type de console</span> <ul class="dropdown"> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </div> <div id="dpd" class="wrapper-dropdown" tabindex="1"> <span>Type de jeux</span> <ul class="dropdown"> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </div>

Le code CSS

.wrapper-dropdown { position: relative; margin: 8% 0 10% 0; padding: 10px; background: #fff; border-radius: 5px; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); cursor: pointer; outline: none; color: #5b5b5d; } .wrapper-dropdown:after { content: ""; width: 0; height: 0; position: absolute; right: 15px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #8aa8bd transparent; } .wrapper-dropdown .dropdown { position: absolute; left: 0; right: 0; max-height: 380px; overflow: auto; padding: 0; background: white; border-radius: inherit; border: 1px solid rgba(0,0,0,0.17); box-shadow: 0 0 5px rgba(0,0,0,0.1); font-weight: normal; list-style: none; opacity: 0; pointer-events: none; } .wrapper-dropdown .dropdown li a { display: block; padding: 10px; color: #576987; } .wrapper-dropdown .dropdown li:hover a { background: #f3f8f8; } .wrapper-dropdown.active .dropdown { opacity: 1; pointer-events: auto; }

Le code JS

function DropDown(el) { this.dpd = el; this.placeholder = this.dpd.children('span'); this.opts = this.dpd.find('ul.dropdown > li'); this.val = ''; this.index = -1; this.initEvents(); } DropDown.prototype = { initEvents : function() { var obj = this; obj.dpd.on('click', function(event){ $(this).toggleClass('active'); return false; }); obj.opts.on('click',function(){ var opt = $(this); obj.val = opt.text(); obj.index = opt.index(); obj.placeholder.text(obj.val); }); }, getValue : function() { return this.val; }, getIndex : function() { return this.index; } } $(function() { var dpd = new DropDown( $('#dpd') ); $(document).click(function() { // all dropdowns $('.wrapper-dropdown').removeClass('active'); }); });

1 réponse

Maenhyr, il y a 9 ans

Bonjour,

c'est normal, les trois éléments possèdent le même id dans ton HTML (id="dpd"), hors lorsque tu lances var dpd = new DropDown( $('#dpd') );, jQuery ne va le langer que sur le premier élément avec cet id. Pour résoudre ton problème, tu as deux solutions :
1) tu définis un id unique à chacun et tu appelles var dpd = new DropDown( $('#dpd') ); 3 fois avec les trois ids
2) tu définis une classe à tous tes éléments et tu modifies un peu le code du Dropdown pour qu'il puisse comprendre quel élément est cliqué.