Come ottenere il menu a discesa per aprire/chiudere il clic anziché il passaggio del mouse?

Question

Sono molto nuovo a javascript e ajax/jquery e ho lavorato sul tentativo di ottenere uno script per aprire e chiudere il menu di selezione in un clic piuttosto che al passaggio del mouse.

Il menu in questione si trova su http://www.gamefriction.com/Coded/ ed è il menu scuro sul lato destro sotto l'intestazione. Mi piacerebbe che si aprisse e chiudesse come l'altro menu che si trova più in basso (è grigio chiaro e si trova nel modulo "Seleziona divisione").

Il menu grigio fa parte di un menu e il menu della lingua non lo è.

Ho anche un'importazione jQuery che può essere trovata nella sorgente di visualizzazione del link precedente.

mio codice JavaScript:

<script type="text/javascript"> 

/* Language Selector */ 

$(function() { 
    $("#lang-selector li").hover(function() { 
     $('ul:first',this).css('display', 'block'); 
    }, function() { 
     $('ul:first',this).css('display', 'none'); 
    }); 
}); 

$(document).ready(function(){ 

    /* Navigation */ 
    $('.subnav-game').hide(); 
    $('.subnav-game:eq(0)').show(); 
    $('.preorder-type').hide(); 


    $('.preorder-type:eq(3)').show(); 


}); 


</script> 

mio CSS:

#lang-selector 
    { 
    font-size: 11px; 
    height: 21px; 
    margin: 7px auto 17px auto; 
    width: 186px; 
    } 

#lang-selector span 
    { 
    color: #999; 
    float: left; 
    margin: 4px 0 0 87px; 
    padding-right: 4px; 
    text-align: right; 
    } 

#lang-selector ul 
    { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    } 

#lang-selector ul li a 
    { 
    padding: 3px 10px 1px 10px; 
    } 

#lang-selector ul, #lang-selector a 
    { 
    width: 186px; 
    } 

#lang-selector ul ul 
    { 
    display: none; 
    position: absolute; 
    } 

#lang-selector ul ul li 
    { 
    border-top: 1px solid #666; 
    float: left; 
    position: relative; 
    } 

#lang-selector a 
    { 
    background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat; 
    color: #666; 
    display: block; 
    font-size: 10px; 
    height: 17px; 
    padding: 4px 10px 0 10px; 
    text-align: left; 
    text-decoration: none; 
    width: 166px; 
    } 

#lang-selector ul ul li a 
    { 
    background: #333; 
    color: #999; 
    } 

#lang-selector ul ul li a:hover 
    { 
    background: #c4262c; 
    color: #fff; 
    } 

mio HTML:

<div id="lang-selector"> 
     <ul> 
     <li> 
     <a href="#">Choose a Language</a> 
     <ul> 
     <li><a href="?iw_lang=en">English</a></li> 
     <li><a href="?iw_lang=de">Deutsch</a></li> 
     <li><a href="?iw_lang=es">Espa&ntilde;ol</a></li> 
     <li><a href="?iw_lang=fr">Fran&ccedil;ais</a></li> 
     <li><a href="?iw_lang=it">Italiano</a></li> 
     </ul> 
     </li> 
     </ul> 
    </div> 

Grazie!

Answer 1

$(function() { 
    $("#lang-selector li:first").click(function(){ 
     $('ul:first',this).toggle(); 
    }) 
}); 

Utilizzando ginocchiera si richiede all'utente di fare clic per aprire poi ricliccare per chiudere

Answer 2

ricerca questo $("#lang-selector li").hover e sostituirlo con

$("#lang-selector li").click 

Answer 3

.hover, .Cliccate, .something, sono tutti i trigger, visualizzare questo link:

Jquery Events

per imparare di più su eventi in jQuery !

Ps: Bharwani Sushil (votare esso), è giusto, basta cambiare la tua .hover dal .Click

Answer 4

I avrebbe fatto qualcosa di simile ...

$(function() { 
$("#lang-selector > li").click(function() { 
    $('ul:first',this).toggleClass('active'); 
}); 
}); 

E, poi, nel CSS aggiungere questo:

.active { display: block; } 

< < EDIT: Rimosso "ul" dalla classe ".active" per l'efficienza di rendering CSS >>

fare in modo che il sub-nav <ul> ha anche "display: none;" su di esso per impostazione predefinita nel tuo CSS.

Questo farà in modo che non facendo clic su un li > tag < a # lang-selettore, ma in ogni sub-nav <ul> tag sarà o aprire o chiudere il sub-nav, a seconda del suo stato attuale.

Se siete preoccupati per l'accessibilità di aver "display: none" sul sub-nav per impostazione predefinita, si può fare qualcosa di simile ...

$(function() { 
    $("#lang-selector li ul").addClass("hidden"); 
    $("#lang-selector li").click(function(e) { 
     e.preventDefault(); 
     $('ul:first',$(this)).toggleClass('hidden active'); 
    }); 
}); 

< < EDIT: selettori Altered per abbinare l'esempio fornito, trasformato "questo" in oggetto jQuery. >>

E poi anche aggiungere questo al CSS

.hidden { display: none; } 

In questo scenario, si ha la <ul> mostra per default, poi quando i carichi di documenti, jQuery aggiunge la classe "nascosto" per tutti per nasconderli, quindi con il clic dello <li> alternerà le classi nascoste e attive, mostrandole o nascondendole.

Avrai anche bisogno di rimuovere il tuo "display: none" dal tuo # lang-selector ul in CSS, altrimenti avrà la priorità sulle classi nascoste/attive.

Answer 5

se avete bisogno di due funzioni per un evento click, provare .toggle

sto usando questo:

$('.triggerlist').toggle(function(e) { 
     e.preventDefault(); 
    $(this).find('ul').fadeIn(); 
    },function() { 
    $(this).find('ul').fadeOut(); 
    }); 

Il che mi permette di fare più cose sui 2 funzioni che solo il .Click con la sua 1 funzione.