Discussion :

[chindit]

Salut tout le monde.

Alors voilà, j'ai la liste suivante:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<ul class="packageBody">
    <li>LIGNE 1</li>
    <li>LIGNE 2</li>
    <li>LIGNE 3</li>
    <li>LIGNE 4</li>
    <li><a href="#" class="item_display_more">VOIR SOUS-LIGNES</a></li>
    <li class="menu_display_more">SOUS-LIGNE 1</li>
    <li class="menu_display_more">SOUS-LIGNE 2</li>
    <li class="menu_display_more">SOUS-LIGNE  3</li>
    <li><a href="#">Affiche Popup</a></li>
</ul>

Par défaut, la classe «menu_display_more» est cachée en CSS.
Je souhaiterais, lors du clic sur «VOIR SOUS-LIGNES», afficher toutes les sous-lignes de l'élément packageBody.
Je suis obligé d'utiliser les CLASS parce qu'il y a plusieurs éléments «packageBody» dans ma page.
Bien entendu, je souhaite n'afficher les sous-lignes QUE pour le «packageBody» sélectionné.

Actuellement, j'utilise ce code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('.packageBody').click(function(event){
		$('.menu_display_more').toggle();
		event.preventDefault();
	});

Ce code fonctionne parfaitement… sauf que lors du clic sur le lien «Affiche Popup»… les sous-lignes s'affichent aussi!
Il est logique que les sous-lignes s'affichent, mais ce n'est pas ce que je souhaite.
En outre, je souhaiterais modifier le texte «VOIR SOUS-LIGNES» en «CACHER SOUS-LIGNES» mais vu que le jQuery traîte le «packageBody», je n'ai pas accès au lien…

Vous avez une idée pour résoudre mon problème?
Merci beaucoup.

[NoSmoking]

Bonjour,
change ta structure en utilisant une sous liste

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="packageBody">
    <li>LIGNE 1</li>
    <li>LIGNE 2</li>
    <li>LIGNE 3</li>
    <li>LIGNE 4</li>
    <li><a href="#" class="item_display_more">VOIR SOUS-LIGNES</a>
      <ul>
        <li class="menu_display_more">SOUS-LIGNE 1</li>
        <li class="menu_display_more">SOUS-LIGNE 2</li>
        <li class="menu_display_more">SOUS-LIGNE  3</li>
      </ul>
    </li>
    <li><a href="#">Affiche Popup</a></li>
</ul>