显示/隐藏div无效点击

Question

I've made an agenda which got events and once i click on days , i would like to click on a day and this will show the event but this don't work 我已经制定了一个包含事件的议程，一旦我单击“几天”，我想单击一天，这将显示该事件，但这不起作用

I want to show the class="info" 我想显示class =“ info”

i've tried like that but this don't work 我已经尝试过了，但这不起作用

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

}); }）;

maybe it's because of css too ? 也许也是因为CSS？

$(document).on('click', '.toggleNextInfo', function () {
    $(this).next('.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: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;}

<!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).next('.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; ?>>     <a class="toggleNextInfo"  > TEST </a>
                                <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>


</br>
</br>


    </body>
</html>

Answer 1

$(this).next() would find a DOM element that immediately follows this , but in you example .toggleNextInfo does not have a .info node following it. $(this).next()会发现，紧随DOM元素this ，但是在你例子.toggleNextInfo没有一个.info它后面的节点。

.nextAll() would be better if your elements were on the same level. 如果您的元素处于同一级别，则.nextAll()会更好。

You need to think through what html structure you have, because that informs your decisions with jquery. 您需要考虑一下您拥有的html结构，因为这会通过jquery告知您的决定。 Not only are these two elements not siblings, but they're not at the same nesting level. 这两个元素不仅不是兄弟姐妹，而且不在同一嵌套级别。

.toggleNextInfo
ul
  li
  li
    .info

Since these are likely to change, I generally prefer using find . 由于这些可能会更改，因此我通常更喜欢使用find 。 There are several ways you can do this, but this should work: 您可以通过多种方式执行此操作，但这应该可行：

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

显示/隐藏div无效点击

问题描述

1 个解决方案

解决方案1
0 2014-10-12 15:41:41

显示/隐藏div无效点击

问题描述

1 个解决方案

解决方案1 0 2014-10-12 15:41:41

解决方案1
0 2014-10-12 15:41:41