jquery click 事件,模仿toggle效果

作者:basve - 2015年04月04日
<!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 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!