toggle 1.9以上版本的解决方法

作者：Jasmine - 2016年02月18日

案例展示代码：

<!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 许可协议。转载请注明出处！