Imprimer la Page

Forum-webmaster

Technique - programmation => Javascript / DOM / Ajax => Message commencé par: Jquery_1472 le le 17-05-2012 a 12:30:32

Titre: Besoin d'aide
Posté par: Jquery_1472 le le 17-05-2012 a 12:30:32

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>

(paragraphe)

Titre: Re:Besoin d'aide
Posté par: WebD le le 17-05-2012 a 18:21:28

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

A+

Olivier.

Titre: Re:Besoin d'aide
Posté par: Jquery_1472 le le 20-05-2012 a 18:00:45

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 ?

Titre: Re:Besoin d'aide
Posté par: romuald le le 29-07-2012 a 09:29:48

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.