利⽤jQuerytoggle事件制作FAQ列表页⼩⽩第三次打卡
利⽤jQuery toggle事件制作FAQ列表页
直接贴代码
<html>
<head>
<title>FAQ列表by-夜梦昔</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
p{
border:1px red solid;
padding:5px;
display:none;
}
div{
padding:5px 15px;
}
img.tit{
padding-left:20px;
jquery是什么软件}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//⽤toggle绑定两个函数轮流切换
$("img.tit").toggle(function(){
$(this).next().show(1500);
$(this).attr("src","images/-.jpg");
},
function(){
$(this).next().hide(1500);
$(this).attr("src","images/+.jpg");
});
});
</script>
</head>
<body>
<div>
<img src="images/+.jpg" class="tit">什么是⼈⾝保险?
<p>
<img src="images/gd.jpg" class="gd"><br>
⼈⾝保险是...
</p>
</div>
<div>
<img src="images/+.jpg" class="tit">什么是保险合同?
<p>
<img src="images/gd.jpg" class="gd"><br>
保险合同是...
</p>
</div>
<div>
<img src="images/+.jpg" class="tit">什么是保险⼈?
<p>
<img src="images/gd.jpg" class="gd"><br>
保险⼈是...
</p>
</div>
<div>
<img src="images/+.jpg" class="tit">什么是投保⼈? <p>
<img src="images/gd.jpg" class="gd"><br>
投保⼈是...
</p>
</div>
</body>
</html>
如果有什么不对的还请各位⼤佬指正
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论