显示/隐藏div?

时间:2014-10-12 19:42:16

标签: javascript php jquery html

您好我制作了一个有活动的日历,但问题是我无法修复该活动的点击,因为您可以在9月份看到这里我可以看到活动的事件使用:hover css,创建了一个Jquery函数,但我不能点击单选按钮或其他东西

http://esig-sandbox.ch/paintball/calendrierClient2.php 我想展示class =" info"

感谢您的帮助:)



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

/*[fmt]0020-000A-3*/
body{  background:#EEEEEE;  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{  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 .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;}

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="icon" href="images/date.ico" />
        <title>Calendrier</title>
        <link rel="stylesheet" type="text/css" href="style5.css" />
		
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

        <script type="text/javascript">
            jQuery(function($){
               $('.month').hide();
               $('.month:first').show();
               $('.months a:first').addClass('active');
               var current = 1;
               $('.months a').click(function(){
                    var month = $(this).attr('id').replace('linkMonth','');
                    if(month != current){
                        $('#month'+current).slideUp();
                        $('#month'+month).slideDown();
                        $('.months a').removeClass('active'); 
                        $('.months a#linkMonth'+month).addClass('active'); 
                        current = month;
                    }
                    return false; 
               });
            });
			
		
        </script>

  <script type="text/javascript">
$(document).on('click', '.toggleNextInfo', function () {
    $(this).parent().find('.info').toggle();
});
	        </script>
    </head>
    <body>
        <?php
        require('config.php'); 
        require('date.php');
        $date = new Date();
        $year = date('Y');
        $events = $date->getEvents($year);
        $dates = $date->getAll($year);
        ?>
        <div class="periods">
            <div class="year"><?php echo $year; ?></div>
            <div class="months">
                <ul>
                    <?php foreach ($date->months as $id=>$m): ?>
                         <li><a href="#" id="linkMonth<?php echo $id+1; ?>"><?php echo utf8_encode(substr(utf8_decode($m),0,3)); ?></a></li>
                    <?php endforeach; ?>
                </ul>
            </div>
            <div class="clear"></div>
            <?php $dates = current($dates); ?>
            <?php foreach ($dates as $m=>$days): ?>
               <div class="month relative" id="month<?php echo $m; ?>">
               <table>
                   <thead>
                       <tr>
                           <?php foreach ($date->days as $d): ?>
                                <th><?php echo substr($d,0,3); ?></th>
                           <?php endforeach; ?>
                       </tr>
                   </thead>
                   <tbody>
                       <tr>
                       <?php $end = end($days); foreach($days as $d=>$w): ?>
                           <?php $time = strtotime("$year-$m-$d"); ?>
                           <?php if($d == 1 && $w != 1): ?>
                                <td colspan="<?php echo $w-1; ?>" class="padding"></td>
                           <?php endif; ?>


              <td     <?php if($time == strtotime(date('Y-m-d'))): ?> class="today" <?php endif; ?>>   <input type="button" class="toggleNextInfo">  
                                <div class="relative">
                                    <div class="day"><?php echo $d; ?></div>
                                </div>
                               <div class="daytitle">
                                   <?php echo $date->days[$w-1]; ?> <?php echo $d; ?>  <?php echo $date->months[$m-1]; ?>
                               </div>
							   </br>
                               <ul class="events">
							   </br>
							   </br>
                 
                                                           
                                   <?php if(isset($events[$time])): foreach($events[$time] as $e): ?>
                                   
									  <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>
									
                                   <?php endforeach; endif;  ?>
                               </ul>
                           </td>
                           <?php if($w == 7): ?>
                            </tr><tr>
                           <?php endif; ?>
                       <?php endforeach; ?>
                       <?php if($end != 7): ?>
                            <td colspan="<?php echo 7-$end; ?>" class="padding"></td>
                       <?php endif; ?>
                       </tr>
                   </tbody>
               </table>
               </div>
            <?php endforeach; ?>
        </div>
		
        <div class="clear"></div>

</div>



  


		
    </body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

始终使用文档ready function添加活动。

$(function(){

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

});