¿Cómo mostrar una lista con el clic del mouse usando jquery?

Con el siguiente código:

    $(document).ready(function(){ $('#cssdropdown li.headlink').hover( function() { $('ul', this).css('display', 'block'); }, function() { $('ul', this).css('display', 'none'); }); });       

Puedo mostrar una lista al pasar el mouse.

Quiero mostrar las listas con un clic del mouse. Por ejemplo, si hago clic en Search Engines , aparecerán la Google, Yahoo and Live Search list .

Prueba esto:

 $("UL UL").css("display", "none"); $(".title").click(function(e) { e.preventDefault(); $(this).next("UL").toggle(); }); 

He agregado una clase de title a cada uno de los elementos en los que se puede hacer clic para que el código se pueda reutilizar.

Violín aquí

Simplemente dé una identificación a la etiqueta y cree un evento para eso. así: $('#search_engines').click(function () { });

Esto debería dar el comportamiento que desea, cualquier lista abierta se ocultará y se abrirá la lista correspondiente:

  $('li.headlink ul').hide(); $('li.headlink > a').click(function(e) { e.preventDefault(); $('li.headlink ul').hide(); $(this).next().show(); }); 

o usando el enfoque de alternar para que pueda cerrar todas las listas:

 $('li.headlink ul').hide(); $('li.headlink > a').click(function(e) { e.preventDefault(); var thisList = $(this).next(); thisList .toggle(); $('li.headlink ul').not(thisList).hide(); }); 

Aquí hay un JSFiddle que muestra el segundo enfoque trabajando