jQuery menu a fisarmonica - mantiene aperto il menu fisarmonica alla pagina I am on

Question

Spero che tu possa aiutare. Sono molto nuovo a jQuery e sto lavorando a un menu di fisarmonica a cinque o sei livelli per la navigazione laterale. Ho ottenuto la maggior parte del codice che ho finora da Dane Peterson @ daneomatic.com (grazie Dane!). Ma, io sono bloccato su una cosa:

Mi piacerebbe avere la mia fisarmonica/lavoro albero come questo:

Se navigando verso il basso in, diciamo, a tre livelli, e cliccare sul link per aprire la pagina collegata a quel livello, come faccio a indicare una volta che la pagina di livello tre viene caricata su quella pagina? Inoltre, come posso mantenere l'albero aperto a quel livello quando carico la pagina?

Credo che quello che sto chiedendo sia: c'è un modo per fisarmonica/albero di aggiornarsi automaticamente per mostrare in quale pagina ci si trova e avere l'albero aperto a quel livello?

Grazie in anticipo!

Answer 1

Questa è una delle insidie ​​dei siti Web navigati in JavaScript: il tuo URL in realtà non punta alla tua pagina, come una pagina tradizionale. Rende difficile l'utilizzo delle normali funzionalità del browser come i segnalibri e il pulsante Indietro.

Una soluzione che alcune persone sembrano utilizzare in questi giorni è quella di memorizzare queste informazioni dopo la parte hash dell'URL.

http://www.mysite.com/path/index.html#jsPageIndicator 

Memorizzando le informazioni al posto di "jsPageIndicator" di cui sopra, si può quindi analizzare con il JavaScript dopo $ .ready (documento)(), e lo hanno dirvi quale pagina dovrebbe essere caricato. Nel tuo caso questo potrebbe essere qualcosa di semplice, come l'indice della fisarmonica che ha il focus (dovrebbe essere aperto).

Si potrebbe anche voler guardare il jQuery history plugin.

Oppure, come sottolinea Alex di seguito, benalman.com/projects/jquery-bbq-plugin

Answer 2

Per ottenere la fisarmonica per aprire automaticamente la sezione corretta in base alla URL, si inizia con abilitando l'opzione navigation con qualcosa di simile:

$('#accordion').accordion('option', 'navigation', true); 

per impostazione predefinita, questa opzione cerca il link intestazione della fisarmonica che ha un href che corrisponde al Fragme URL nt (se il tuo URL è http://somesite.com/about#contact, #contact è il frammento) e apre la sezione del link dell'intestazione. Dal momento che si sta utilizzando la fisarmonica per navigare pagine diverse, probabilmente non sarà necessario frammenti URL per abbinare contro, quindi dovrete scrivere un personalizzato navigationFilter:

$('#accordion').accordion('option', 'navigationFilter', function(){ ... }); 

È possibile utilizzare l'opzione navigationFilter a scavalca il modo in cui il plugin per fisarmonica abbina i collegamenti dell'intestazione all'URL della pagina corrente.

Finora, abbiamo aperto la sezione destra della fisarmonica in base alla pagina corrente. Successivamente, dobbiamo evidenziare il collegamento in quella sezione che corrisponde alla pagina. Potrai farlo con qualcosa di simile:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#accordion li').each(function() { 
     var li = $(this); 
     var a = $('a', li); 
     if(/* compare the href of the 'a' element to the current URL */) { 
     li.addClass('active'); 
     } 
    }); 
    }); 
</script> 

<div id="accordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div> 
    <ul> 
     <li><a href="/about">About</a></li> 
     <li><a href="/contact">Contact</a></li> 
    </ul> 
    </div> 
    <h3><a href="#">Section 2</a></h3> 
    <div> 
    <ul> 
     <li><a href="/help">Help</a></li> 
     <li><a href="/faq">FAQ</a></li> 
    </ul> 
    </div> 
</div> 

Qui stiamo attraversando tutti i link nella pagina della fisarmonica di navigazione, scegliendo quello che corrisponde l'URL corrente, e l'applicazione di una classe .active ad esso, che si può quindi avere uno stile diverso con i CSS.

---

Una parentesi: un'altra, probabilmente meglio, modo per realizzare la seconda parte è quello di costruire la pagina con la classe .active già applicato per il collegamento appropriato, ma che presuppone che il controllo sul back-end e che sai come farlo In effetti, in questo caso, è possibile saltare l'intera cosa navigationFilter e generare un blocco <script> per impostare l'opzione active sulla fisarmonica per aprire la sezione corretta.

Answer 3

Potete vedere qui: http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php

Answer 4

Nessuno dei precedenti ha lavorato per me. La documentazione di jquery ui è di riserva e il codice sorgente non lascia molti indizi per qualcuno non esperto in jquery.

Ho usato la fisarmonica in una barra laterale e i collegamenti in ogni sezione di contenuto erano all'interno delle tabelle, quindi ho dovuto tenere traccia della mia struttura HTML (una cosa fragile), e farlo subito dopo la creazione della fisarmonica:

 $("#sidebar td").each(function() { 
      var td = $(this); 
      var a = td[0].firstChild; 
      if (a.href == location.href) { 
       $("#sidebar").accordion("activate", 
         td.parent().parent().parent().parent().prev()); 
      } 
     }); 

Sì, orribile, il backup di un TR, tbody, tavolo, e div, ma ha funzionato, e nel nostro caso non abbiamo cambiato il codice HTML-struttura in mesi.

Answer 5

Ecco un esempio che ha funzionato per me:

Need help with jQuery UI Accordion navigationFilter option

Answer 6

OK questo problema è stato bugging me per un po 'e ho pensato di postare la mia soluzione a questo problema. (Sono un po 'un principiante con JQuery quindi ....)

Nella mia circostanza ho una pagina master che contiene lo script JQuery per gestire l'automazione del menu e ho diverse pagine di contenuto che hanno menu diversi (Ho un menu orizzontale attraverso l'intestazione della pagina e quindi la fisarmonica JQuery gestisce il sottomenu per così dire).

Ho aggiunto i tag ID ai menu header div e quindi ho inserito quanto segue nel segnaposto contenuto della pagina di contenuto.

$(document).ready(function() { 
     $('.active').next().hide().removeClass('active'); 
     $('#yourMenuHeaderIdTag).addClass('active').next().show(); 
    }; 

Questo funziona perfettamente e mi ha fatto chiedo perché ho lottato con questo per l'ultima settimana o giù di lì quando la soluzione è così semplice!