¿Lista como menú desplegable de selección con jQuery?

Question

Por favor,

Quiero simular selección desplegable, pero solo habrá enlaces, no formulario. Problema es cómo haber seleccionado, y la categoría visible o el enlace de subcategoría donde se encuentra actualmente?

<ul><li>Category 
    <ul> 
    <li>Subcategory1</li> 
    <li>Subcategory2</li> 
    </ul> 
</li></ul> 

Por lo tanto, cuando usted está en la categoría, visible será el nombre de la categoría y esto es fácil porque su primer LI, pero cuando se está en la subcategoría a continuación, el nombre de la subcategoría será "seleccionado" y visible .

Si tiene alguna otra solución, enumere, sugiérame.

Lo siento por mi Inglés no sé cómo explicarlo mejor :)

Answer 1

Si te entiendo correctamente, me parece que solo necesitas un par de elementos div. Uno para mostrar el elemento seleccionado actualmente, y el otro para mostrar el menú completo (¿menos el elemento actual?).

Si ese es el caso, se puede adjuntar un evento de clic a cada elemento del menú que actualizar el texto de la parte superior div:

<div id="current_page">Default Value</div> 
<div id="current_menu"> 
    <ul> 
    <li><a href="page1.html">Page 1</a></li> 
    <li><a href="page2.html">Page 2</a></li> 
    </ul> 
</div> 

A continuación, vamos a usar jQuery para añadir algunos efectos y la lógica:

$("#current_page").click(function(){ 
    $("#current_menu").slideToggle(); 
}); 

$("#current_menu a").click(function(event){ 
    event.preventDefault(); //prevent synchronous loading 
    $("#current_page").html($(this).text()); 
}); 

Answer 2

Creo que busca Suckerfish Dropdowns.

Answer 3

después de cada clic es necesario establecer la clase de los li apropiada iterando sobre los elementos de la lista y comprobar en contra de la ubicación actual:

<div id="div1"> 
    <ul> 
    <li>Category 
     <ul> 
      <li><a href="abc">Subcategory1</a></li> 
      <li><a href="xyz">Subcategory2</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Luego, su javascript:

var loc = window.location; 
$("#div1 li").each(function(){ 
    var a = $("a", this).attr("href"); 
    if(a == loc){ 
     $(this).addClass("hilight"); 
    } else { 
     $(this).removeClass("hilight"); 
    } 
}); 

Answer 4

Aquí es una buena lista de posibles soluciones - http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/