Bonjour,
Mon but est d'appliquer un effet slideDown() du framework JQuery sur des news gérer dynamiquement (PHP+MySQL), j'y connais pas grand chose en JavaScript donc voilà comment j'ai fais :
Code :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 <link rel="stylesheet" type="text/css" href="css/design.css" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("<?php echo '.newsM'.$numNews;?>";).click(function () { if ($("<?php echo '.descriNews'.$numNews;?>";).is(":hidden";)) { $("<?php echo '.descriNews'.$numNews;?>";).slideDown("slow";); } else { $("<?php echo '.descriNews'.$numNews;?>";).hide(); } }); }); </script> </head> <body> <div id="news"> <h2>News</h2> <ul> </ul> </div>
en gros j'ai été obligé d'ajouter une instruction php ajoutant lenuméro de la news à mes class .descriNews et .newM, histoire d'identifier chaque news et d'associer l'effet slideDown()au bon descriptif.
le système de news ajoutera dans le div news (entre les balise ul) ce truc :
et le style que je cherche à appliquer sur mon div .descriNews[numero_de_la_news] est :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 <li class="<!--<?php echo 'newsM'.$numNews;?>-->">Alain bernard sort sont requins </li> <div class="<!--<?php echo 'descriNews'.$numNews;?>-->">description de la news</div>
vous l'aurez compris le problème c'est que mon .descriNews est suivis du numéro de la news pour qu'il soit associé à la bonne news donc impossible de placer les style dans une feuille css, je cherche donc un moyen pas trop lourd d'appliquer ce style car il y a pas mal d'attribut et mettre tout ça dans ma balise div j'ai peur que ça face un peu "too much".
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 .descriNews[numero_de_la_news]{ display:none; margin-left:10%; border-left:1px solid #d6e1ec; border-right:1px solid #d6e1ec; background-color:#fff5ff; padding:3px; }
Partager