Siedzę dzisiaj nad pewnym problemem cały dzień i powiem, że udało mi się go rozwiązać, ale tak zawiłym sposobem, że na pewno da się dużo prościej :-P
Chcę zrobić rozwijane, boczne, pionowe menu.
Mam w bazie 2 tabele, kategorie i podkategorie:
KATEGORIE:
id_kategorii
nazwa_kategorii
PODKATEGORIE:
id_podkategorii
nazwa_podkategorii
id_kategorii
Chcę, aby wchodząc na stronę widoczne były tylko główne kategorie (zapewne będą wczytane, ale schowane). Po kliknięciu danej kategorii rozwijają się dla niej podkategorie, a strona się przeładowuje (wyświetlane są dane pozycje, ale tym się nie zajmujemy tu, generalnie chodzi o to, że musi być przeładowanie). Jeżeli klikniemy inną kategorię to stare podkategorie się zwijają, a rozwijają się nowe.
Mam następujący kod smartowy i chce rzeźbić do niego:
<div id="menu_kontyner">
{foreach from=$a_kategorie item=a_kategoria}
<div class="menu_kategorie">
<a href="index.php?akcja=costam&id={$a_kategoria.id_kategorii}" class="rozwin" name="{$a_kategoria.id_kategorii}"> {$a_kategoria.nazwa_kategorii}</a>
<div class="menu_podkategorie" name="podkategorie{$a_kategoria.id_kategorii}">
{foreach from=$a_podkategorie item=a_podkategoria}
{if $a_kategoria.id_kategorii==$a_podkategoria.id_kategorii}
<a href="index.php?akcja=costam2&id={$a_podkategoria.id_podkategorii}">- {$a_podkategoria.nazwa_podkategorii}</a>
{/if}
{/foreach}
</div>
</div>
{/foreach}
</div>
W jQuery tak kombinowałem:
$('.menu_podkategorie').hide(); //chowaj na starcie wszystkie divy z podkategoriami
$('.rozwin')
.click(function(){ //przy kliknięciu jakiejś głównej kategorii
var nr = $(this).attr("name"); //wczytaj jej numer
$('div[name=podkategorie' + nr + ']').show("medium"); //i pokaż tylko tego diva z podkategoriami, którego nazwa odpowiada klikniętej kategorii głównej
});
ale oczywiście to je źle, bo przy przeładowaniu pierwsza linijka kodo będzie zawsze ukrywać to co przed chwilą odkryliśmy.
Poproszę o wskazówki, bądź gotowe rozwiązanie.