Elenco come selezionare il menu a discesa con jQuery?

Question

Per favore,

Voglio simulare il menu a discesa selezionare, ma ci saranno solo collegamenti, nessuna forma. Il problema è come avere selezionato, e la categoria visibile o il link della sottocategoria in cui ti trovi attualmente?

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

Così, quando si è in Categoria, visibile sarà il nome della categoria e questo è facile, perché la sua prima LI, ma quando si è in sottocategoria allora il nome della sottocategoria verrà "selezionato" e visibile .

Se si dispone di un'altra soluzione, elencare, suggerire.

Ci dispiace per il mio inglese non so come spiegare meglio :)

Answer 1

Se ho capito bene, mi sembra che tu abbia bisogno di un paio di elementi div. Uno per mostrare l'elemento attualmente selezionato e l'altro per mostrare l'intero menu (meno l'elemento corrente?).

Se questo è il caso, è possibile collegare un evento click per ogni voce di menu che aggiornerà il testo del div in alto:

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

Allora ti utilizzare jQuery per aggiungere alcuni effetti e la logica:

$("#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

Penso che si sta cercando Suckerfish Dropdowns.

Answer 3

Dopo ogni click è necessario impostare la classe del Li appropriata scorrere il voci di elenco e controllo contro la posizione corrente:

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

Allora il tuo 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

Ecco una bella lista di possibili soluzioni - http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/