toggle 1.9以上版本的解决方法
案例展示代码:
<!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="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>ok</title> <style> .none { display: none; } .active { display: block; } .notice h3 { cursor: pointer; } </style> <!-- 引用百度开发平台 jquery --> <!--<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script> --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> </head> <body> <div class="notice"> <h3>这是一个标题</h3> <div class="none">建百站,建百站素材网.生死由命,如果的如果 ,假如没有如果 , 天空的颜色是彩色的. 就如细细那飞扬的心, 那么可爱,美丽.</div> </div> <div class="notice"> <h3>这是二个标题</h3> <div class="none">建百站,建百站素材网.生死由命,如果的如果 ,假如没有如果 , 天空的颜色是彩色的. 就如细细那飞扬的心, 那么可爱,美丽.</div> </div> <div class="notice"> <h3>这是三个标题</h3> <div class="none">建百站,建百站素材网.生死由命,如果的如果 ,假如没有如果 , 天空的颜色是彩色的. 就如细细那飞扬的心, 那么可爱,美丽.</div> </div> <div class="notice"> <h3>这是四个标题</h3> <div class="none">建百站,建百站素材网.生死由命,如果的如果 ,假如没有如果 , 天空的颜色是彩色的. 就如细细那飞扬的心, 那么可爱,美丽.</div> </div> <div class="notice"> <h3>这是五个标题</h3> <div class="none">建百站,建百站素材网.生死由命,如果的如果 ,假如没有如果 , 天空的颜色是彩色的. 就如细细那飞扬的心, 那么可爱,美丽.</div> </div> <script> $(document).ready(function(){ $('.notice > h3').toggle(function(){ $(this).parent('.notice').children('.none').css('display','block'); },function(){ $(this).parent('.notice').children('.none').css('display','none'); }) }); </script> <!-- <script> $(document).ready(function(){ $('.notice>h3').click(function(){ $(this).css('background','#ccc'); //$(this).parent('.notice').children('.none').css('display','block'); $(this).parent('.notice').children('.none').toggle(); }); }); </script>--> <!-- <script> $(document).ready(function(){ $('.notice>h3').click(function(){ $(this).css('background','#ccc'); $(this).parent('.notice').children('.none').slideToggle(); }); }); </script>--> <!--<script> $(document).ready(function(){ $('.notice>h3').click(function(){ if($(this)){ if($(this).parent('.notice').children('.none').css('display') =='none'){ $(this).parent('.notice').children('.none').css('display','block'); }else { $(this).parent('.notice').children('.none').css('display','none'); } } }); }); </script>--> </body> </html>
由于jq1.9以上的版本,取消了.toggle()这个效果,但是需要实现可以用click解决之外,需要下载jquery-migrate.js文件,来向下兼容已删除掉的toggle()方法.
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
$(document).ready(function(){ $('.notice > h3').toggle(function(){ $(this).parent('.notice').children('.none').css('display','block'); },function(){ $(this).parent('.notice').children('.none').css('display','none'); }) });
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/347
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!