<title>jQuery事件的链式写法</title>
<style type="text/css">
.iframe{ border::1px solid #9F6;font-size:13px;}
.title{ padding:6px; background-color:#EEE;}
.content{ padding:8px 0px; font-size:12px; text-align:center; display:none;}
.curcol{ background-color:#C00;}
.cur{ background-color:#3F0;}
</style>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function (){
$(".content").html("您好!欢迎来到jQuery世界");
$(".title").click(function(){
//点击title盒子时 给title添加样式 同时修改content的样式 让content显示出来 并且也给content添加样式
$(".title").addClass("cur").next
(".content").css("display","block");
$(".content").addClass("curcol");
});
//点击button时 给title添加样式 但是同时也隐藏content 此处不需要添加title样式 因为前面已经点击的话已经给title加了
//如果直接点击button的话就还是会添加样式
$("#btn").click(function(){
$(".title").addClass("curcol")
.next(".content").css("display","none");
});
//点击content采用hide()函数直接隐藏
$(".content").click(function(){
$(this).hide();
});
});
</script>
<body>
<div class="iframe">
<div class="title"></div>
<div class="content"></div>
<button type="button" id="btn">切换隐藏</button>
</div>
</body>
注意:如果修改盒子或者元素样式 都可以采用display:none 或者采用hide()隐藏
评论这张
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
