Besoin d'aide - Forum Javascript / DOM / Ajax

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  Javascript / DOM / Ajax (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Besoin d'aide

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Besoin d'aide (Lu 2224 fois)

Besoin d'aide
« sur: le 17-05-2012 a 12:30:32 »

Jquery_1472
Membre récent

Hors-Ligne

Sexe: Male

Messages: 2

Bonjour, je voulais savoir un truc pour mon code :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>jQuery</title>

<script type="text/javascript" src="jquery.js"> </script>

<script type="text/javascipt">
$(document).ready(function(){
$("div.menu_point").hide();
...
});
</script>

<script type="text/javascript">
$(document).ready(function(){
$("div.menu_point").hide();
$("p.menu_chapitre").click(function(){
$(this).next("div.menu_point").slideDown(300)
.siblings("div.menu_point").slideUp(slow);
})
})
</script>

<style type="text/css">
body { margin: 10px;
font: 0.8em Arial, Helvetica, sans-serif;}
.menu { width: 150px;}
.menu_chapitre { padding: 5px;
              cursor: pointer;
              position: relative;
              margin:1px;
              font-weight:bold;
              background: #9CF;
              border: 1px solid black;}
.menu_point a { display:block;
              color:black;
              background-color:white;
              padding-left:30px;
              text-decoration:none;}
.menu_point a:hover { color: black;
                  text-decoration:underline;}
</style>

</head>

<body>

<div>

<div class="menu">

<p class="menu_chapitre">Chapitre 1</p>

<div class="menu_point">

    <a href="#">Point 1</a>

    <a href="#">Point 2</a>

    <a href="#">Point 3</a>

</div>

<p class="menu_chapitre">Chapitre 2</p>

<div class="menu_point">

    <a href="#">Point 1</a>

    <a href="#">Point 2</a>

    <a href="#">Point 3</a>

</div>

<p class="menu_chapitre">Chapitre 3</p>

<div class="menu_point">

<a href="#">Point 1</a>

    <a href="#">Point 2</a>

    <a href="#">Point 3</a>

</div>

</div>

</div>

</body>

</html>

Je voulais que
Code:
slideUp
puisse faire en sorte que ça remonte seulement quand je rec lique sur un
Code:
p
(paragraphe)

Rapporter au modérateur

Re:Besoin d'aide
« Répondre #1 sur: le 17-05-2012 a 18:21:28 »

WebD
Superactif

Hors-Ligne

Sexe: Male

Messages: 938

Si tu veux qu'on t'aide il faudrait que tu nous donnes un peu plus d'informations.

A+

Olivier.

Rapporter au modérateur

Agence Web | Sticker MacBook | Lunettes personnalisées

Re:Besoin d'aide
« Répondre #2 sur: le 20-05-2012 a 18:00:45 »

Jquery_1472
Membre récent

Hors-Ligne

Sexe: Male

Messages: 2

Salut Olivier,

En fait je veux faire en sorte que la liste que j'ai ouverte avec ce script (jQuery) se referme seulement quand je reclique sur le titre de la liste. J'ai testé

Code:
slideUp(clic)

Et ça ne marche pas, comment faire ?

Rapporter au modérateur

Re:Besoin d'aide
« Répondre #3 sur: le 29-07-2012 a 09:29:48 »

romuald
Membre récent

Hors-Ligne

Messages: 6

Bonjour,

En remplaçant

Code:

$(this).next("div.menu_point").slideDown(300)
.siblings("div.menu_point").slideUp(slow);

par un truc du genre (j'ai pas testé)

Code:

if ($("div:menu_point").is(":hidden")) {
$(this).next("div.menu_point").slideDown(300);
} else {
$(this).next("div.menu_point").hide();

tu devrais obtenir le comportement que tu veux.