J'espère que vous pouvez aider. Je suis très nouveau à JQuery et travaille sur un menu accordéon à cinq ou six niveaux pour ma navigation latérale. J'ai eu la majorité du code que j'ai jusqu'à présent de Dane Peterson @ Daneomatic.com (merci Dane!). Mais je suis coincé sur une chose:
J'aimerais avoir mon accord d'accordéon / arbre comme celui-ci:
Lorsque je navigue dans, disons, de niveau trois, puis cliquez sur le lien pour ouvrir la page liée à ce niveau, comment puis-je indiquer une fois que la page de niveau trois est chargée sur cette page? En outre, comment puis-je garder l'arbre ouvert à ce niveau lorsque je charge la page?
Je suppose que ce que je demande est: y a-t-il une façon pour l'accordéon / arborescence de mettre à jour automatiquement pour montrer à quel point vous êtes et que l'arbre est ouvert à ce niveau?
Merci d'avance!
4 Réponses :
Ceci est l'un des pièges des sites Web navigués JavaScript - Votre URL ne pointe pas réellement votre page, comme une page traditionnelle. Il est difficile d'utiliser des fonctions de navigateur normales telles que les signets et le bouton arrière.
Une solution Certaines personnes semblent utiliser ces jours-ci sont de stocker ces informations après la partie Hash de l'URL. en stockant des informations à la place de "jspageIndicator" Ci-dessus, vous pouvez ensuite l'analyser avec le JavaScript après $ (document) .Readady (), et vous dire à quelle page doit être chargée. Dans votre cas, cela pourrait être quelque chose de simple, tel que l'indice de l'accordéon qui a l'accent (devrait être ouvert). Vous voudrez peut-être aussi regarder le plug-in jQuery History. ou, Comme le souligne Alex ci-dessous, benalman.com/projects/jquery-bbq-plugin < / p>
Si vous êtes allé avec la méthode de changement de hasch décrit ici, le plugin suivant est inégalé: Benalman.com/ Projets / JQuery-BBQ-Plugin - il remplacera bientôt le plug-in jQuery History qui est terriblement daté.
@Alex - Nice! n'était pas au courant de celui-là.
Merci pour l'info - je vais voir si je peux l'obtenir pour travailler avec votre solution ou avec celui d'aucune surprise (ci-dessus) - doigts croisés!
Pour obtenir l'accordéon d'ouvrir automatiquement la section correcte en fonction de l'URL, vous commencerez par la mise en place de l'option code> de navigation code> avec quelque chose comme: par Par défaut, cette option recherche le lien d'en-tête d'accordéon qui comporte un href code> correspondant au fragment d'URL (si votre URL est http://somesite.com/about#contact , #contact est le fragment) et ouvre la section du lien d'en-tête. Puisque vous utilisez l'accordéon pour accéder à des pages différentes, vous n'aurez probablement pas de fragments d'URL à correspondre. Vous devrez donc écrire un Navigationfilter CODE>: P> <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>
Aucune de ces réponses a fonctionné pour moi. La documentation pour JQuery UI est de réserve et le code source n'a pas laissé de nombreuses indices pour quelqu'un qui n'est pas bien versé dans JQuery.
J'ai utilisé l'accordéon dans une barre latérale et les liens dans chaque section de contenu étaient des tables à l'intérieur, donc je Devait garder une trace de ma structure HTML (une chose fragile), et faites ce droit après la création de l'accordéon: oui, horrible, sauvegarde d'un tr, Todbody , table et div, mais cela a fonctionné et, dans notre cas, nous n'avons pas changé la structure HTML en mois.
OK, ce problème m'a bugggé pendant un moment et j'ai pensé que je posterais ma solution à ce problème. (Je suis un peu un débutant avec jQuery alors ....)
Dans ma situation, j'ai une page principale contenant le script JQuery pour gérer l'automatisation du menu et j'ai plusieurs pages de contenu qui ont des menus différents ( J'ai un menu horizontal accroc avec l'en-tête de la page, puis l'accordéon JQuery gère le sous-menu afin de parler). P>
J'ai ajouté des balises d'identification à l'en-tête de menu DIVS puis placé les éléments suivants dans l'espace réservé de contenu de la Page de contenu. P>
$(document).ready(function () {
$('.active').next().hide().removeClass('active');
$('#yourMenuHeaderIdTag).addClass('active').next().show();
};