Jquery using: après le sélecteur

Je prépare actuellement un menu et, comme il s’agit d’un menu avec une lueur autour du bord, il est nécessaire de placer un bloc vierge au-dessus pour masquer la lueur indésirable sur le chevauchement. Je crée cela en utilisant le sélecteur: after sur les balises li pour le menu et le code pour le faire fonctionne bien.

Cependant, mon problème est que je ne peux que faire en sorte qu’il s’applique à tous les éléments du menu en même temps en basculant sur l’atsortingbut display. Ce que je veux, c’est que le sélecteur after soit appliqué uniquement à l’élément de liste actuel.

Chaque élément de liste a un identifiant unique, mais je n’arrive pas à comprendre comment utiliser le sélecteur: after sur un élément de liste spécifique dans jQuery.

Merci d’avance pour votre aide. Désolé si ce n’est pas clair.

Code HTML

 link 1
 link 2
 link 3

CSS pour l’élément de liste

 #menu li{ float:left; margin:0 20px 0 0; height:87px; z-index:1; position:relative; background: #f8f8f8; cursor:pointer; border:1px solid #CCC; border-bottom:none; } #menu li:after{ display:none; content: ''; position: absolute; top: 0; bottom: -5px; left: 0; width: 291px; height:10px; margin-top:109px; background: #f8f8f8; }

Je pensais que ce serait aussi simple que de mettre quelque chose comme

 $$('li[id="0"]:after').show();

ou peut-être

 $$('li[id="1"]:after').css("display" : "block");

mais cela ne fonctionne pas.

Lorsque vous manipulez avec :after et :before , vous ne pouvez normalement modifier la valeur du contenu qu’en faisant référence à la propriété data-content (voir par exemple ce fil )! Cependant, vous pouvez faire quelque chose de plus, par exemple, vous pouvez remplacer la façon dont le code CSS lié à :after et :before est rendu en utilisant un truc sale.

Ce que je fais est de supprimer la classe associée à :after ou :before que je doive changer, puis je crée une nouvelle classe dans le document et je l’applique aux éléments cibles.

Je vais faire un bref exemple en utilisant les si gentils sortingangles CSS3. Supposons que vous ayez une classe avec arrow-up et que vous utilisiez :after pour imprimer un sortingangle avec css au-dessus d’un div. Voici un CSS.

 .div{position:relative;display:block; width:100px; height:50px; border:1px solid black} .arrow-up:after { content:""; position:absolute; top:-10px; left:50%; margin-left:-5px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #333; }

Voici un morceau de HTML similaire

 My div with centered sortingangle on top
 My div with centered sortingangle moved a lot with JQuery

Le but est de placer le sortingangle de la deuxième division à 10% du coin supérieur gauche au lieu de la valeur par défaut (au centre). Par conséquent, nous pouvons utiliser JQuery pour supprimer l’ancienne classe, append une nouvelle classe personnalisée à la tête et appliquer la nouvelle classe avec le nouveau code :after css au div.

 var counter = 0; $.fn.moveTheArrow = function() { $(this).removeClass('arrow-up'); var modclass = 'arrow-up' + (counter++); $("").appendTo("head"); $(this).addClass(modclass); });

Notez que j’ai défini un compteur global auquel adresser le générateur d’identifiant unique (bien sûr, vous pouvez également suivre d’autres méthodes).

Enfin, utilisez JQuery pour appeler la fonction sur la div cible, par exemple

 $(function(){ $('#toBeMoved').moveTheArrow(); });

Voici un JSFiddle qui fonctionne

Assurez-vous que vos ids sont uniques.

Vous n’avez besoin que d’un $ , essayez

 $('#myID').nextAll('li').show();

jsFiddle