<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQUERY 多DIV展开，关闭功能</title>
<script type="text/javascript" src="js/jquery/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".toggle_div").click(function() {
$("#" + this.id).toggleClass("isTogged");
$("#" + this.id + "_Content").toggle();
$(".isTogged").css("color","white");
alert($("#"+this.id).hasClass("isTogged"));
if($("#"+this.id).hasClass("isTogged")){
$(".isTogged").text("展开");
}
else{
$("#"+this.id).text("关闭");
}
});
});
</script>
<style type="text/css">
body{
background:orange;
}
.box
{
width: 256px;
padding: 5px;
border: 1px solid #000;
margin: 20px;
height: auto;
}
.title
{
background-color: #F4F4F4;
}
.isTogged
{
background-color: #F00;
}
</style>
<div class="box">
<div>
Tasks<a href="javascript:;" id="Tasks" class="toggle_div">展开</a>
</div>
<div id="Tasks_Content" class="hid_div">
开闭原则指的是一个软件实体应对对扩展开发，对修改关闭(Software entities should be open for
extension, but closed for
modification)。这个原则是说在设计一个模块的时候，应对使这个模块可以在不被修改的前提下被扩展，换言之，应对可以不必修改源代码的情况下
改变这个模块的行为。</div>
</div>
</div>
<div class="box">
<div>
Defects<a href="javascript:;" id="Defects" class="toggle_div">关闭<a>
</div>
<div id="Defects_Content" class="hid_div">
开闭原则指的是一个软件实体应对对扩展开发，对修改关闭(Software entities should be open for
extension, but closed for
modification)。这个原则是说在设计一个模块的时候，应对使这个模块可以在不被修改的前提下被扩展，换言之，应对可以不必修改源代码的情况下
改变这个模块的行为。</div>
</div>
</body>
</html>
扫一扫
138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
