¿Cómo obtener el menú desplegable para abrir/cerrar al hacer clic en lugar de desplazarse?

Question

Soy muy nuevo en javascript y ajax/jquery y he estado trabajando para tratar de obtener un script para abrir y cerrar el menú desplegable al hacer clic en lugar de desplazar el mouse.

El menú en cuestión se encuentra en http://www.gamefriction.com/Coded/ y es el menú oscuro en el lado derecho debajo del encabezado. Me gustaría que se abra y se cierre como el otro menú que está más abajo (es de color gris claro y se encuentra en el módulo "Seleccionar división").

El menú gris es parte de un menú y el menú de idiomas no.

Tengo una importación jquery que se puede encontrar en la fuente de vista del enlace de arriba.

Mi código 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> 

Mi 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; 
    } 

Mi 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> 

Gracias!

Answer 1

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

El uso de palanca será necesario que haga clic para abrir a continuación Haga clic de nuevo para cerrar

Answer 2

búsqueda este $("#lang-selector li").hover y reemplazar con

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

Answer 3

.hover, .click, .something, son todos factores desencadenantes, ver este enlace:

Jquery Events

para obtener más información sobre los eventos en jQuery !

Sal: Bharwani sushil (votarlo), es correcto, sólo cambiar su .hover por el .click

Answer 4

I haría algo como esto ...

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

Y, a continuación, en el CSS añadir lo siguiente:

.active { display: block; } 

< < EDIT: Se ha eliminado "ul" de clase ".active" para la eficiencia de representación de CSS >>

También asegúrese de que la sub-nav <ul> tiene "display: none;" en él de forma predeterminada en su CSS.

Esto hará que sea para que haga clic en un li > etiqueta < en # lang-selector, pero no en cualquier sub-nav <ul> etiquetas o bien se abra o cierre la sub-nav, dependiendo de su estado actual.

Si usted está preocupado acerca de la accesibilidad de tener "display: none" en el sub-nav por defecto, se puede hacer algo como esto ...

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

< < EDIT: Altered selectores para que coincida con el ejemplo proporcionado, convirtió "this" en el objeto jQuery. >>

Y luego también añadir esto a la CSS

.hidden { display: none; } 

En este escenario, usted tiene la <ul> que muestra de forma predeterminada, a continuación, cuando se carga el documento, jQuery añade la clase "oculta" a todos ellos para ocultarlos, luego al hacer clic en <li> alternará las clases ocultas y activas, mostrándolas u ocultándolas.

También deberá eliminar su "pantalla actual: ninguna" de su # lang-selector ul ul en CSS, de lo contrario, tiene prioridad sobre las clases ocultas/activas.

Answer 5

si se necesitan dos funciones para un evento de clic, intente .toggle

estoy usando esto:

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

¿Qué me permite hacer más cosas en las 2 funciones que sólo el .click con su 1 función.