scriptbreaker-multiple-accordion-1.js

[Leif Neland]

I et design vi har fået udefra, og som de mener har den funktionalitet,
der er betalt for, bruges denne menu.

Det er en accordion-i-accordion menu.

http://test.paradiss.dk

Der er brug for to modifikationer i venstre-menuen:

Man skal enten kunne folde niveauet ind/ud ved at trykke på pilen,
eller hoppe til destinationen. (Som her i testen hopper til den
tilsvarende menu i det gamle site).

Hopper man fra menuen til en underside, skal menuen åbnes på det sted,
man kom fra.

Der ønskes kun kommentarer til disse to ting; der er andre kendte ting,
der skal justeres ;-)

Leif

--
Husk kørelys bagpå, hvis din bilfabrikant har taget den idiotiske
beslutning at undlade det.

[Jens Peter Karlsen]

Se inline:

On Mon, 10 Dec 2012 23:27:31 +0100, Leif Neland <le...@neland.dk>
wrote:

>Man skal enten kunne folde niveauet ind/ud ved at trykke på pilen,
>eller hoppe til destinationen. (Som her i testen hopper til den
>tilsvarende menu i det gamle site).

Denne del er nem nok. En simpel onclick funktion der sætter
underniveauets visibility til visble (CSS).

>Hopper man fra menuen til en underside, skal menuen åbnes på det sted,
>man kom fra.

Det lyder ikke særlig smart. Normalt ville man åbne menuen der hvor
man nu er, men kan løses ved at sende parametre med som et script så
aflæser for at se hvor man kom fra og så udfolder et eventuelt
underniveaeu så man ser menuen som der hvor man kom fra.

Regards Jens Peter Karlsen.

[Leif Neland]

Jens Peter Karlsen udtrykte præcist:

> Se inline:
>
> On Mon, 10 Dec 2012 23:27:31 +0100, Leif Neland <le...@neland.dk>
> wrote:
>
>> Man skal enten kunne folde niveauet ind/ud ved at trykke på pilen,
>> eller hoppe til destinationen. (Som her i testen hopper til den
>> tilsvarende menu i det gamle site).
>
> Denne del er nem nok. En simpel onclick funktion der sætter
> underniveauets visibility til visble (CSS).

Det er indbygget at hvis href="#" så folder den ud/ind.

Men pilen er ikke i den html, der sendes fra serveren.
Den bliver sat på med jQuery:

$(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");

Hele accordeonen bliver sat på en traditionel <ul><li> træstruktur af
javascript; er javascript slået fra, ses en udfoldet, uanimeret menu.

... noget senere:

Jeg flyttede pilen uden for <a> ved at lave en .before() i stedet for
.append(), og kun aktivere accordeon'en på <span> i stedet for <a>

>
>> Hopper man fra menuen til en underside, skal menuen åbnes på det sted,
>> man kom fra.
>
> Det lyder ikke særlig smart. Normalt ville man åbne menuen der hvor
> man nu er, men kan løses ved at sende parametre med som et script så
> aflæser for at se hvor man kom fra og så udfolder et eventuelt
> underniveaeu så man ser menuen som der hvor man kom fra.
>

Det var selvfølgelig også det jeg mente. :-)

Det er stadig en udfordring...

Det må kunne gøres med jQuery.

Menuen er
<ul class='topnavø>
<li><span>[+]</span><a href="/?id=1">Overmenu 1</a>
<ul>
<li><a href="/?id=2">Undermenu 1.1</li>
<li><a href="/?id=3">Undermenu 1.2</li>
<li><a href="/?id=4">Undermenu 1.3</li>
</ul>
</li>
<li><span>[+]</span><a href="/?id=5">Overmenu 2</a>
<ul>
<li><a href="/?id=6">Undermenu 2.1</li>
<li><a href="/?id=7">Undermenu 2.2</li>
<li><span>[+]</span><a href="/?id=8">Undermenu 2.3
<ul>
<li><a href="?/id=9">Undermenu 2.3.1</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Accordeon'en åbner ved click på <span>[+]</span>

var url=window.location.href.toString().split(window.location.host)[1];
giver querystrengen, f.ex. "/?id=7"

Jeg kan finde den href med
$('a[href="'+url+'"]').html(); Det giver "Undermenu 2.2"

$('a[href="/?id=5"]').parent('li').find('span').click();
åbner overmenu 2, da span er lige ved siden af a.

Men id=6 duer ikke, fordi span'en ligger højere oppe.
Og id=8 åbner (måske) undermenu 2.3 , men det ses ikke, fordi overmenu
2 ikke er åben.

Så jeg skal søge opad i træet indtil <ul class='topmenu'> og click()'e
på alle <span> undervejs, i tilfældet id=9 er det menu 2.3 og 2, der
skal åbnes.

Og det skal åbnes i den rigtige rækkefølge; først Overmenu 2, derefter
Undermenu 2.3

[Martin]

$('a[href="/?id=9"]').parentsUntil('.topnavø').filter('span').click();
Noget ala dette?

>
> Og det skal åbnes i den rigtige rækkefølge; først Overmenu 2, derefter
> Undermenu 2.3

Det burde ikke være nødvendigt,
Det eneste der sker er jo at der bare sættes display:block på de åbne
elementer (og lige at den der span ændre sig til ned-pil istedet)

[Leif Neland]

Martin frembragte:

> On 12-12-2012 04:01, Leif Neland wrote:
>
> $('a[href="/?id=9"]').parentsUntil('.topnavø').filter('span').click();
> Noget ala dette?
>

Det virkede ikke.

Men jeg fandt en alternativ metode.
Der er samtidig på siden en breadcrumb:
<span id="breadcrumb">
<a href='/?id=123'>Hovedmenu1</a> -
<a href='/?id=345'>Undermenu1.2</a>
</span>

Den er meget lettere at parse, og få click'et de rigtige steder.