È ansible creare un div per agire come un dropdown?

Sto usando jquery per compilare un menu a discesa da un file di testo e funziona perfettamente. Ma visivamente, mi piacerebbe che sembrasse diverso.

Il mio menu a discesa è in un div. Quello che mi piacerebbe fare è rendere il div stesso cliccabile in modo tale che quando lo fai clic, appaiono le opzioni del menu a discesa. E quando un’opzione è selezionata, l’etichetta div è impostata sul testo dell’opzione selezionata.

C’è qualche modo per rendere il menu a discesa nascosto ma ancora funzionale?

inserisci la descrizione dell'immagine qui

Se capisco correttamente, lo vuoi. Clicca qui per una DEMO .

HTML

 
Sign in with

CSS

 *,*:after,*:before { box-sizing: border-box; } .wrapper-dropdown-2 { position: relative; width: 200px; margin: 0 auto; padding: 10px 15px; /* Styles */ background: #fff; border-left: 5px solid grey; cursor: pointer; outline: none; } .wrapper-dropdown-2:after { content: ""; width: 0; height: 0; position: absolute; right: 16px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: grey transparent; } .wrapper-dropdown-2 .dropdown { /* Size & position */ position: absolute; top: 60%; left: -45px; right: 0px; /* Styles */ background: white; transition: all 0.3s ease-out; list-style: none; /* Hiding */ opacity: 0; pointer-events: none; } .wrapper-dropdown-2 .dropdown li a { display: block; text-decoration: none; color: #333; border-left: 5px solid; padding: 10px; transition: all 0.3s ease-out; } .wrapper-dropdown-2 .dropdown li:nth-child(1) a { border-left-color: #00ACED; } .wrapper-dropdown-2 .dropdown li:nth-child(2) a { border-left-color: #4183C4; } .wrapper-dropdown-2 .dropdown li:nth-child(3) a { border-left-color: #3B5998; } .wrapper-dropdown-2 .dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle; } /* Hover state */ .wrapper-dropdown-2 .dropdown li:hover a { color: grey; background-color: darkgrey; } .wrapper-dropdown-2.active:after { border-width: 0 6px 6px 6px; } .wrapper-dropdown-2.active .dropdown { opacity: 1; pointer-events: auto; } 

JavaScript

 function DropDown(el) { this.dd = el; this.initEvents(); } DropDown.prototype = { initEvents : function() { var obj = this; obj.dd.on('click', function(event){ $(this).toggleClass('active'); event.stopPropagation(); }); } } $(function() { var dd = new DropDown( $('#dd') ); $(document).click(function() { $('.wrapper-dropdown-2').removeClass('active'); }); }); 

Ecco un occhiata: http://jsfiddle.net/4Zw32/

Fondamentalmente puoi selezionare quale div è selezionato cercando il div con la class selezionata e potresti assegnare un attributo di dati per ottenere un valore aggiuntivo.

Css

 * { margin: 0; padding: 0; } .sel { color:white; width: 250px; min-height: 40px; box-sizing: border-box; background-color: #55E6FA; overflow: hidden; } .txt { padding: 10px; } .selected { background-color: #31A9B9; } .hide { display: none; } .sel .options div:hover { background-color: #31A9B9; } .sel .options { width: 250px; background-color: #66f7FB; } .sel .options div { transition: all 0.2s ease-out; padding: 10px; } 

jquery

 var sel = $('.sel'), txt = $('.txt'), options = $('.options'); sel.click(function (e) { e.stopPropagation(); options.show(); }); $('body').click(function (e) { options.hide(); }); options.children('div').click(function (e) { e.stopPropagation(); txt.text($(this).text()); $(this).addClass('selected').siblings('div').removeClass('selected'); options.hide(); });