Lista jak wybierz rozwijane z jQuery?

Question

Proszę,

Chcę symulować wybór z listy rozwijanej, ale będą tylko linki, bez formularza. Problem polega na tym, jak wybrać i widoczną link do kategorii lub podkategorii w miejscu, w którym aktualnie jesteś?

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

Więc, kiedy jesteś na kategorii, widoczna będzie nazwa kategorii i jest to łatwe, ponieważ jego pierwszej Li, ale gdy jesteś w podkategorii następnie nazwę podkategorii będą „wybrane” i widoczne .

Jeśli masz jakieś inne rozwiązanie, a następnie listę, zasugeruj mi.

Przepraszam za mój angielski nie wiem jak to wytłumaczyć lepiej :)

Answer 1

Jeśli dobrze cię rozumiem, to brzmi dla mnie tak, jakbyś potrzebował tylko kilku elementów div. Jeden, aby pokazać aktualnie wybrany element, a drugi, aby wyświetlić całe menu (minus bieżący element?).

Jeśli tak jest, można dołączyć zdarzenie click do każdej pozycji menu, która będzie zaktualizować tekst górnej 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> 

Wtedy będziesz używać jQuery dodać kilka efektów i logiki:

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

myślę szukasz Suckerfish Dropdowns.

Answer 3

Po każdym kliknięciu trzeba ustawić klasę odpowiednim Li przez iteracja ciągu elementów listy i sprawdzanie przeciwko obecnej lokalizacji:

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

Wtedy twój 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

Oto miły lista możliwych rozwiązań - http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/