jquery click 事件,模仿toggle效果
<!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> <script src="./script/jquery-1.8.3.min.js"></script> <!-- 引用百度开发平台 jquery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.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').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()这个效果,jquery 手册可查到. 所以在这用click 事件模仿了一个,关键,是判断下下当前的状态.应该会有更的代码来实现.
本文作者: basve
本文链接: https://www.jianbaizhan.com/article/195.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!