jQuery Girl
  1. jQuery Girl
  3. jQuery: Sélection uniquement ul, pas ul ul
Intereting Posts
Rechercher un modèle dans DOM et remplacer son contenu à l’aide de jquery Quelle est la différence entre fetch et jquery ajax? Erreur de serveur interne n ° 500 lors de la tentative d’affichage de JSONResult avec jQuery ajax et MVC Attendu “{” et à la place vu “retour” jquery bounce effect rompt l’alignement en ligne de la liste Ordre de chargement Bootstrap, jQuery, Popper et CSS Échec de l’animation de la structure de maçonnerie jQuery Isotope :( Impossible de sélectionner un ID avec Jquery à partir de la fonction $ .get () / $ .load (). Aidez-moi, s’il vous plaît? Alerte Autoclose Rappel jQuery appelé trop tôt? L’URL d’origine n’est pas autorisé par Access-Control-Allow-Origin avec l’API Google Direction. Jquery dataTable Editable Cell pas en mesure de gérer les requêtes ajax à partir d’un petit module de discussion 0x800a1391 – Erreur d’exécution JavaScript: “jQuery” n’est pas défini asp.net obtenir des contrôles HTML dans le code derrière

jQuery: Sélection uniquement ul, pas ul ul

J’essaie de transformer un menu de base en accordéon en soumission – en utilisant jQuery.

Voilà le menu:

http://www.cybart.com/bscg/

Voici un extrait de code qui lui donne la fonctionnalité d’accordéon: 

$('#access ul li').click(function(){ $('#access ul ul:visible').slideUp();    $(this).children('ul:hidden').slideDown();   });

Le problème: un clic sur un lien de sous-menu fait glisser le sous-menu vers le haut (et le fermer).

Je souhaite que le sous-menu rest ouvert lorsque l’utilisateur clique sur son lien et ne glisse vers le haut que lorsque l’utilisateur clique sur un lien de niveau supérieur.

Comment puis-je sélectionner uniquement le dernier niveau ul avec jQuery pour animer le sous-menu? Ou existe-t-il un moyen de sélectionner le lien du sous-menu et de “l’indiquer” pour que le sous-menu rest ouvert au clic?

J’apprécierais votre sagesse!

Il semble que vous ayez besoin d’utiliser l’opérateur > en CSS.

.foo > .bar sélectionne tous les éléments avec la bar classe qui est un enfant direct d’un élément avec la classe foo

Compris, code de travail: 

 $('#access ul.menu > li > a').click(function(){ $('#access ul ul:visible').slideUp(); $(this).siblings('ul').slideDown(); }); });

Pour empêcher le menu de remonter, cela fonctionne: 

 $('#access ul.menu > li > a').click(function(){ var siblingUl = $(this).siblings('ul'); if(siblingUl.is(':visible')) { // The currently open menu was clicked // Remove this if you want nothing to happen siblingUl.slideUp(); return; } $('#access ul ul:visible').slideUp(); siblingUl.slideDown(); }); });

Vous ne pouvez pas empêcher la fermeture du menu car le navigateur fait une nouvelle demande et charge le menu à nouveau lorsque vous cliquez sur les liens. Il suffit de regarder la barre d’URL. Lorsque vous cliquez sur les liens du sous-menu, l’URL change.

Vous devrez append quelque chose à l’URL pour empêcher le sous-menu de se réduire ou tester l’URL pour voir s’il doit rouvrir l’accordéon après le chargement de la page.

Ceci est beaucoup plus simple et fonctionne pour moi. 

 $(".parent").click(function() { $(this).children('ul').slideToggle(); });

J’ai pris 10 minutes pour lire et comprendre votre code parce que vous avez beaucoup de styles et d’identifiants et que cela le complique beaucoup, prenez soin des meilleures pratiques.

Tout ce dont vous avez besoin est quelque chose comme 

  ... $(document).ready(function(){ $(".menu").click(function(){ $(this).next().toggle() }) })