jQuery Akkordeon-Menü - halten Sie das Akkordeon-Menü offen für die Seite Ich bin auf

Question

Ich hoffe, Sie können helfen. Ich bin sehr neu in jQuery und arbeite an einem Fünf- oder Sechs-Level-Akkordeon-Menü für meine Seitennavigation. Ich habe den Großteil des Codes, den ich bisher von Dane Peterson @ daneomatic.com habe (danke Dane!). Aber, ich bin auf eine Sache stecken:

Ich möchte mein Akkordeon/Baum Arbeit wie dieses:

Wenn ich navigieren nach unten in, sagen wir, Stufe drei, und klicken Sie auf den Link zu öffnen die Seite, die mit dieser Ebene verknüpft ist, wie zeige ich an, dass die Seite drei Seiten lädt, die ich auf dieser Seite bin? Wie kann ich den Baum auf dieser Ebene öffnen, wenn ich die Seite lade?

Ich denke, was ich frage ist: Gibt es eine Möglichkeit für das Akkordeon/Baum automatisch zu aktualisieren, um zu zeigen, welche Seite Sie sind, und die Baumstruktur auf diese Ebene geöffnet haben?

Vielen Dank im Voraus!

Answer 1

Dies ist eine der Tücken von JavaScript navigierten Websites - Ihre URL zeigt nicht wie eine herkömmliche Seite auf Ihre Seite. Es macht es schwierig, normale Browserfunktionen wie Lesezeichen und die Zurück-Schaltfläche zu verwenden.

Eine Lösung, die einige Leute heutzutage zu verwenden scheinen, besteht darin, diese Informationen nach dem Hash-Teil der URL zu speichern.

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

von Informationen anstelle von „jsPageIndicator“ Speichern von oben können Sie dann mit dem JavaScript parsen es nach $ (document) .ready() und haben es Ihnen sagen, welche Seite geladen werden soll. In Ihrem Fall könnte das etwas Einfaches sein, wie zum Beispiel der Index des Akkordeons, der den Fokus hat (sollte offen sein).

Sie könnten auch an der jQuery history plugin.

Oder aussehen wollen, wie Alex unten weist darauf hin, benalman.com/projects/jquery-bbq-plugin

Answer 2

das Akkordeon Um automatisch den richtigen Abschnitt basierend auf der URL zu öffnen, werden Sie beginnen mit die navigation Option mit so etwas wie ermöglicht:

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

sucht standardmäßig diese Option für das Akkordeon-Header Link, der ein href hat, der die URL fragme Spiele nt (wenn Ihre URL http://somesite.com/about#contact ist, #contact ist das Fragment) und öffnet den Abschnitt dieses Headerlinks. Da Sie das Akkordeon verwenden zu verschiedenen Seiten zu navigieren, werden Sie wahrscheinlich nicht URL-Fragmente müssen gegen übereinstimmen, so dass Sie eine benutzerdefinierte navigationFilter schreiben müssen:

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

können Sie verwenden, um die navigationFilter Option überschreiben, wie das Akkordeon-Plugin Header-Links mit der URL der aktuellen Seite übereinstimmt.

Bis jetzt haben wir den richtigen Abschnitt des Akkordeons geöffnet, basierend auf der aktuellen Seite. Als nächstes müssen wir den Link in diesem Abschnitt hervorheben, der der Seite entspricht. Sie werden feststellen, dass wie mit etwas tun:

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

Hier sind wir durch alle Seite Links in der Navigations Akkordeon gehen, die Kommissionierung, die die aktuelle URL übereinstimmt, und Anlegen eines .active Klasse es, was Sie kann dann mit CSS anders formatieren.

---

Nebenbei: eine andere, wahrscheinlich besser, Art und Weise der zweite Teil zu erreichen, ist die Seite mit der .active Klasse bereits auf den entsprechenden Link angelegt zu bauen, aber das setzt voraus, dass die Kontrolle über das Backend haben und dass du weißt wie man es macht. In der Tat, wenn das der Fall ist, könnten Sie die ganze navigationFilter Sache überspringen und einen <script> Block erzeugen, um die active Option auf dem Akkordeon zu setzen, um den rechten Abschnitt zu öffnen.

Answer 3

Sie können hier sehen: http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php

Answer 4

Keine der oben für mich gearbeitet. Die Dokumentation für jquery ui ist spärlich, und der Quellcode hinterließ nicht viele Hinweise für jemanden, der sich nicht in jQuery auskennt.

Ich benutzte das Akkordeon in einer Seitenleiste, und die Links in jedem Inhaltsbereich waren in Tabellen, so musste ich meine HTML-Struktur (eine fragile Sache) verfolgen, und dies direkt nach der Erstellung des Akkordeons tun:

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

Ja, schrecklich, das Sichern eines tr, tbody, Tabellen- und div, aber es funktionierte, und in unserem Fall haben wir nicht die HTML-Struktur in Monaten geändert.

Answer 5

Hier ist ein Beispiel, das für mich gearbeitet:

Need help with jQuery UI Accordion navigationFilter option

Answer 6

OK dieses Problem mich für eine Weile wurde abgehört und dachte, dass ich meine Lösung für dieses Problem schreiben würde. (Ich bin ein bisschen ein Neuling mit JQuery so ....)

In meinem Fall habe ich eine Masterseite, die das JQuery-Skript enthält, um die Automatisierung des Menüs zu behandeln, und ich habe mehrere Inhaltsseiten, die verschiedene Menüs haben (Ich habe ein horizontales Menü über den Seitenkopf und dann behandelt das JQuery Akkordeon das Untermenü sozusagen).

Ich habe ID-Tags zu den Menü-Header divs hinzugefügt und dann folgende in den Inhalts-Platzhalter der Inhaltsseite platziert.

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

Das funktioniert perfekt und es mir machte sich fragen, warum ich mit diesem in der letzten Woche zu kämpfen haben oder so, wenn die Lösung ist so einfach!