Problème calendrier Jquery Cacher / Montrer Div

Par razeno, il y a 11 ans

Javascript

Bonjour j'ai suivis le tutoriel du calendrier mais j'ai un problème avec l'affichage en Javascript d'un DIV , étant donné que j'ai un :hover et un :active dans mon fichier css j'aimerais juste que mon div reste affiché après le clique . J'ai créer une fonction Jquery

<script type="text/javascript">
$(function(){

$(document).on('click', '.toggleNextInfo', function () {
    $(this).parent().find('.info').toggle();
});

});  
</script>

Que j'apelle ici 

<div class="info" >
                                        <li > <?php echo $e; ?></li>
                                            <li> 
                                                    <form> <input type="radio" name="Disponibilité" value="Disponibilité"> Choisir cette disponibilite
                                                            <input type="submit" name="Envoyer" value="Envoyer">
                                                    </form>
                                            </li>
                                    </div>

Merci pour votre aide

4 réponses

Niramar, il y a 11 ans

Voila une option pour toi avec 1 ou 2 boutons au choix après il ne te faut plus qu'un peu d'imagination pour le mettre en place

// Avec 1 bouton
$('.tonBouton').click(function(e){// Affiche et masque de ta div
  e.preventDefault();
  $('taDiv').toggleClass('active');
});
// ou avec 2 boutons
$('.tonBouton').click(function(e){// Affiche ta div
  e.preventDefault();
  $('taDiv').addClass('active');
});
$('.tonBoutonPourCacher').click(function(e){// Masque ta div
  $('taDiv').removeClass('active');
})
Nakin, il y a 11 ans

Salut,

Je ne vois pas ton ".toggleNextInfo" dans ton html. :(

Peux-tu préciser ce qui se passe actuellement avec ton code quand tu fais ton clic stp ?

Niramar, il y a 11 ans

Pour mon example le css et le html mais tu peu utiliser $('.taDiv').toggle() ou .show() .hide() aussi

<style>
  .maDiv{
    display:none;
  }
  .maDiv.active{
    display:none;
  }
</style>
<button class="tonBouton">tonBouton</button>
<div class="maDiv">
  Ton text est cacher d:
  <button class="tonBoutonPourCacher">tonBoutonPourCacher</button>
</div>

Pour en revenir à ton problème tu as surement .toggleNextInfo:hover{...} dans ton css ben tu remplaces par :
.toggleNextInfo:hover, .toggleNextInfo.active { display:block; }
si tu ne suis pas envois moi le css aussi histoire d'y voir plus clair

razeno, il y a 11 ans

Merci énormément pour vos réponses voici le code CSS comme demandé

/*[fmt]0020-000A-3*/
body{ background:#FFFFFF; letter-spacing:1px; font-family:Helvetica; padding:10px;}
.year{ color:#D90000; font-size:85px;}
.relative{ position:relative;}
.months{}
.month{ margin-top:12px;}
.months ul{ list-style:none; margin:0px; padding:0px;}
.months ul li a{ float:left; margin:-1px; padding:0px 15px 0px 0px; color:#888888; text-decoration:none; font-size:35px; font-weight:bold; text-transform:uppercase;}
.months ul li a:hover, .months ul li a.active{ color:#D90000;}
table{ border-collapse:collapse;}
table td{ border:1px solid #A3A3A3; width:80px; height:80px;}
table td.today{ border:2px solid #D90000; width:80px; height:80px;}
table td.padding{ border:none;}
table td:hover{ background:#DFDFDF; cursor:pointer;}
table th{ font-weight:normal; color:#A8A8A8;}
table td .day{ position:absolute; color:#8C8C8C; bottom:-40px; right:5px; font-weight:bold; font-size:24.3pt;}
table td .events{ position:relative; width:79px; height:0px; margin:-39px 0px 0px; padding:0px;}
table td .events li{ width:10px; height:10px; float:left; background:#000; /*+border-radius:10px;*/ -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px 10px 10px 10px; margin-left:6px; overflow:hidden; text-indent:-3000px;}
table td:hover .events{ position:absolute; left:582px; top:66px; width:442px; list-style:none; margin:0px; padding:11px 0px 0px;}
table td:hover .events li{ border:3px solid green; height:40px; line-height:40px; font-weight:bold; border-bottom:1px solid #D6D6D6; padding-left:41px; text-indent:0; background:none; width:500px;}
table td:hover .events li:first-child{ border-top:1px solid #D6D6D6;}
table td .daytitle{ display:none;}
table td:hover .daytitle{ position:absolute; left:582px; top:21px; width:442px; list-style:none; margin:0px 0px 0px 16px; padding:0px; color:#D90000; font-size:41px; display:block; font-weight:bold;}
.clear{ clear:both;}