Soucis en Jquery / Toggle
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour à tous ^^,
Aujourd'hui c'est moi qui pose une question :p
Alors voici mon appel JQuery :
Et voici ma fonction JQuery :
Dans l'idée, dérouler la deuxième partie de texte quand on clique sur "Plus d'accès", par la suite, pourvoir la réenrouler en cliquant sur "Cacher"... Jusque là rien de bien compliqué...
Mon jolie lien est bien "connecté" puisqu'en cliquant dessus, si je met un magnifique "alert('ok');", il me fait bien une alerte....
Le Jquery étant en cours d'acquisition pour mon cerveau ^^, je sais que " $this.closest('a')" ne va pas du tout, j'ai test "$this.closest('span')" mais bien évidement, c'est pas mieux...
Quelqu'un pour m'aider ?
Merci
Aujourd'hui c'est moi qui pose une question :p
Alors voici mon appel JQuery :
$premierePartie=substr($programme->getAccesAuProgramme(), 0, 245); $deuxiemePartie=substr($programme->getAccesAuProgramme(),245); echo "<p><b>Accès au programme</b> : "; echo $premierePartie.'<span class="plus-d-acces"><a class="closed plusdacces" href="#"><span class="do-open" style="display:inline;visibility:visible;">Plus d\'accès</span><span class="do-close" style="display:none;visibility:hidden;">Moins d\'accès</span></a></span><br />'; echo "<span class='a_cacher' style='display:none;visibility:hidden;'>".$deuxiemePartie."</span></p>";
Et voici ma fonction JQuery :
<script type="text/javascript">
$(function(){
$(".plusdacces").click(function () {
var $this = $(this) ;
$this.closest('a').next('span').slideToggle();//closest('h2')
$this.toggleClass('opened closed') ;
});
});
</script>
Dans l'idée, dérouler la deuxième partie de texte quand on clique sur "Plus d'accès", par la suite, pourvoir la réenrouler en cliquant sur "Cacher"... Jusque là rien de bien compliqué...
Mon jolie lien est bien "connecté" puisqu'en cliquant dessus, si je met un magnifique "alert('ok');", il me fait bien une alerte....
Le Jquery étant en cours d'acquisition pour mon cerveau ^^, je sais que " $this.closest('a')" ne va pas du tout, j'ai test "$this.closest('span')" mais bien évidement, c'est pas mieux...
Quelqu'un pour m'aider ?
Merci
A voir également:
- Toggle navigation
- Navigation privée - Guide
- Supprimer les données de navigation - Guide
- Simulateur de navigation maritime gratuit - Télécharger - Loisirs créatifs
- Enlever navigation privée chrome - Forum Google Chrome
- Desactiver la navigation privee ✓ - Forum Google Chrome
3 réponses
Je ne sais pas si cela peut corriger ton soucis, mais personnellement que je souhaite animer une page je fais usage de la fonction animate de Jquery ^^
$('span').animate({height:'100px''},{queue:false,duration:300});
Dans ton css tu mets un petit overflow: hidden, pour que le texte reste ne dépasse pas le contenant.
Pour afficher le reste du texte :
$('span').animate({height:'500px''},{queue:false,duration:300});
$('span').animate({height:'100px''},{queue:false,duration:300});
Dans ton css tu mets un petit overflow: hidden, pour que le texte reste ne dépasse pas le contenant.
Pour afficher le reste du texte :
$('span').animate({height:'500px''},{queue:false,duration:300});
Et pour le toggle :
$("#boutton").toggle(function(){
$("#cachecache","#Roller").stop().animate({height:"500px"},{queue:false,duration:500});
}, function() { $("#cachecache","#Roller").stop().animate({height:"100px"},{queue:false,duration:500});
});
$("#boutton").toggle(function(){
$("#cachecache","#Roller").stop().animate({height:"500px"},{queue:false,duration:500});
}, function() { $("#cachecache","#Roller").stop().animate({height:"100px"},{queue:false,duration:500});
});
Hum merci mais je suis "obligé" d'utiliser ".slideToggle()" <= norme.
En corrigeant ainsi :
J'ai mon tit span Afficher/cacher qui change, mais le span "a-cacher" ne se déroule pas..... c'est trop bête >< c'est une veille erreur d'inattention mais là je vois tellement pas ><
En corrigeant ainsi :
echo "<p><b>Accès au programme</b> : "; echo $premierePartie.'<h3 class="plus-d-acces"><a class="closed plusdacces" href="#"><span class="do-open" >Plus d\'accès</span><span class="do-close" >Moins d\'accès</span></a></h3><br />'; echo "<span class='a_cacher'>".$deuxiemePartie."</span></p>";
J'ai mon tit span Afficher/cacher qui change, mais le span "a-cacher" ne se déroule pas..... c'est trop bête >< c'est une veille erreur d'inattention mais là je vois tellement pas ><
<html>
<head>
<script type="text/javascript">
$(function(){
$(".plusdacces").click(function () {
var $this = $(this) ;
$this.closest('h3').next('span').slideToggle();//closest('h2')
$this.toggleClass('opened closed') ;
});
});
</script>
</head>
<body>
<?php
$premierePartie=substr($programme->getAccesAuProgramme(), 0, 248);
$deuxiemePartie=substr($programme->getAccesAuProgramme(),248);
?>
<p>
<b>Accès au programme</b> :
<?=$premierePartie; ?>
<h3 class="plus-d-acces">
<a class="closed plusdacces" href="#">
<span class="do-open" >Plus d'accès</span>
<span class="do-close" >Moins d'accès</span>
</a>
</h3>
<span class='a_cacher'><?=$deuxiemePartie; ?></span>
</p>
</body>
</html>
css:
.plus-d-acces a{color : #E40C00 ; text-decoration : underline}
.opened span.do-open {display : none}
.opened span.do-close {display : block}
.closed span.do-open {display : block}
.closed span.do-close {display : none}
.a_cacher {display : none}
J'ai débuggé un peu, actuellement, les Afficher/cacher change, et le sapn "a_cacher" s'ouvre correctement....par contre, il me rafraichit la page et remonte, ce qui retire tout l'interet du toggle....
