Menu accordéon jQuery - garder le menu accordéon ouvert sur la page où je suis

Pour obtenir de l'accordéon pour ouvrir automatiquement la bonne section, en fonction de l'URL, vous commencerez avec l'activation de la navigation option avec quelque chose comme:

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

Par défaut, cette option semble pour l'accordéon en-tête de lien qui a un href qui correspond à l'URL du fragment (si votre URL est http://somesite.com/about#contact#contact est le fragment) et l'ouvre-tête de lien de l'article. Puisque vous êtes à l'aide de l'accordéon à naviguer sur les différentes pages, vous n'aurez probablement pas l'URL de fragments pour la comparaison, de sorte que vous aurez à écrire un personnalisé navigationFilter:

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

Vous pouvez utiliser le navigationFilter option pour remplacer la façon dont l'accordéon plugin matches de l'en-tête pointe vers l'URL de la page en cours.

Jusqu'à présent, nous avons le droit de la section de l'accordéon pour ouvrir fondée sur la page en cours. Ensuite, nous devons mettre en évidence le lien dans la section qui correspond à la page. Vous pourrez le faire avec quelque chose comme:

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

Ici, nous allons grâce à tous les liens de page dans la barre de navigation de l'accordéon, de la cueillette celui qui correspond à l'URL courante, et l'application d'une .active classe, que vous pouvez ensuite le style différemment avec les CSS.

---

Un côté: un autre, sans doute mieux, pour accomplir la deuxième partie consiste à créer la page avec le .active classe déjà appliquées sur le lien approprié, mais cela suppose que vous avez le contrôle sur le serveur et que vous savez comment le faire. En fait, si c'est le cas, vous pouvez passer de l'ensemble de la navigationFilter chose et de générer un <script> bloc pour définir la active option sur l'accordéon pour ouvrir la section de droite.

C'est l'un des pièges de JavaScript navigué sur des sites web - votre URL n'est pas réellement le point de votre page, comme une page traditionnelle. Elle rend difficile l'utilisation normale des fonctions du navigateur comme les signets et le bouton de retour.

Une solution de certaines personnes semblent être à l'aide de ces jours, c'est de stocker cette information après le hachage de la partie de l'url.

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

Par le stockage de l'information à la place de "jsPageIndicator" ci-dessus, vous pouvez ensuite analyser avec le JavaScript après le $(document).ready(), et de vous dire à quelle page doit être chargée. Dans votre cas, cela peut être quelque chose de simple, comme l'indice de l'accordéon qui a le focus (doit être ouvert).

Vous pouvez également regarder la jQuery plugin history.

Ou, comme Alex points ci-après, benalman.com/projects/jquery-bbq-plugin

Aucun des ci-dessus a fonctionné pour moi. La documentation de jquery ui est une pièce de rechange, et le code source n'a pas laissé de nombreux indices pour quelqu'un qui n'est pas versé dans jquery.

J'ai utilisé de l'accordéon dans une barre latérale, et les liens de chaque section de contenu ont été à l'intérieur des tables, j'ai donc dû suivre mon HTML-structure (une chose fragile), et faire de ce droit, après la création de l'accordéon:

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

Oui, horrible, la sauvegarde d'un tr, tr, la table et le div, mais il a travaillé, et dans notre cas, nous n'avons pas changé le HTML-structure en mois.