Det kan måske godt gå hen og blive et problem...
Jeg brugte oprindeligt toggle, men det indhold jeg togglede var så langt at der skulle scrolles ret langt, når man var færdig med at læse indholdet for at komme tilbage til toppen og "toggle-lukke" den igen...
Derfor anbragte jeg en show-knap før indholdet og en hide-knap efter....
Så måske kan jeg ikke brugedin idé, fordi når man så klikker på hide-knappen, så vil den måske ikke forstå at det er den div-box, der kommer lige inden hide-knappen i html-teksten, der skal lukkes...
Forstår du hvad jeg mener?
Jeg kan godt se hvad du mener. Der er et par ting der skal tages i betragtning når man lægger sig fast på en fremgangsmåde. next() er bedst iogmed at du bare kan smide flere elementer på din liste on-the-fly, uden at skulle fedte med at give dem alle en passende id og rel. Det er en ulempe hvis dine elementer ikke altid ligger ved siden af hinanden, men kun dér.
Hvis du føler dig usikker på alt dette, og bare gerne vil have det til at virke i en ruf, så kan du bare bruge id/rel metoden og komme videre i dit liv.
Men hvis du har lyst til at lege videre med JQuery udover hvad der lige nu og her får opgaven løst kan du prøve følgende:
<span class="slick-show">Vis slickbox</span>
<div class="slickbox">Dette er den første slickbox</div>
<span class="slick-show">Vis slickbox</span>
<div class="slickbox">Dette er den anden slickbox</div>
<span class="slick-show">Vis slickbox</span>
<div class="slickbox">Dette er den tredje slickbox</div>
I dette eksempel kan vi med JQuery sige at hver gang der bliver klikket på .slick-show, så skal det næste element, som så er en div med .slickbox, blive vist. Næste gang du klikker på den samme .slick-show vil den samme div så blive skjult igen.
$('.slick.show').click(function(){
$(this).next().toggle();
});
Prøv at teste det af og lege lidt med det.
Hvis du på et tidspunkt laver det sådan så div-boksene ligger før din .slick-show istedet for efter, kan du skifte .next() ud med .prev() og opnå samme resultat. Dette kan vi så overføre til din show og din hide knap, og så bruge det istedet for toggle. Så vil markup'en være som vi ser her:
<span class="slick-show">Vis slickbox</span>
<div class="slickbox">Dette er den første slickbox</div>
<span class="slick-hide">Skjul slickbox</span>
<span class="slick-show">Vis slickbox</span>
<div class="slickbox">Dette er den anden slickbox</div>
<span class="slick-hide">Skjul slickbox</span>
<span class="slick-show">Vis slickbox</span>
<div class="slickbox">Dette er den tredje slickbox</div>
<span class="slick-hide">Skjul slickbox</span>
og i Javascript:
$('.slick-show').click(function(){
$(this).next().show();
});
$('.slick-hide').click(function(){
$(this).prev().hide();
});
Dette burde få det resultat du gerne vil have - men vi kan stadig se de to knapper på alle tidspunkter, og det er muligvis ikke hensigtsmæssigt. Hvis vi fx gerne vil skjule slick-show mens vi har boksen åben, og slick-hide mens boksen er lukket, kan vi prev() og next()'e flere gange:
$('.slick-show').click(function(){
$(this).next().show();
$(this).next().next().show(); // Vi viser både det næste element(slickbox) og elementet efter dét (slick-hide)
$(this).hide(); //så fjerner vi også lige denne knap da den jo ikke skal bruges før vi skjuler boksen igen
});
$('.slick-hide').click(function(){
$(this).prev().hide();
$(this).prev().prev().show(); // Efter at have skjult det objekt der ligger lige før hide-knappen(slickbox) vil vi gerne vise det element der ligger lige før dét(slick-show) så vi kan vise boksen igen senere
$(this).hide(); // Vi skal ikke bruge denne knap før boksen igen bliver vist
});
Hvis det giver mening?
Indlæg senest redigeret d. 28.10.2010 14:31 af Bruger #8223