首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

请教怎么取得“层”下,div样式名个数

2012-04-20 
请问如何取得“层”下,div样式名个数?我页面的结构是这样子的:div class层1div classcontent07/d

请问如何取得“层”下,div样式名个数?
我页面的结构是这样子的:
<div class="层1">
  <div class="content07"></div>
  <div class="content07"></div>
  <div class="content07"></div>
  <div>展开按钮1</div>
</div>
<div class="层2">
  <div class="content07"></div>
  <div class="content07"></div>
  <div class="content07"></div>
  <div class="content07"></div>
  <div class="content07"></div>
  <div>展开按钮2</div>
</div>
<div class="层3">
  <div class="content07"></div>
  <div class="content07"></div>
  <div>展开按钮3</div>
</div>
请问这种效果能否实现,就是
默认“层2”、“层3”的高度为0,当点击“展开按钮1”的时候,算出“层2”中“content07”的个数,之后用个数乘上每行固定高度75px,得出“层2”的高度使其撑开(“层3”的效果一样,并且“层”的个数不定,可能会很多)

这其实就是个点击展开的效果,可是用display:none的方法,和我页面中另外一段代码有冲突,固在这里求教,谢谢!

[解决办法]
感觉你就是想做类似菜单,或者叫滑块的东西,给你做了个,给分全看自觉啊~~

JScript code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE> New Document </TITLE>    <style type="text/css">        .d1{border: #E3E3E3 thin solid;background-color:#99CCCC;}        .d2{border: #E3E3E3 thin solid;background-color:#99CC99;}        .d3{border: #E3E3E3 thin solid;background-color:#9999CC;}        .title{background-color:#99CCCC; height:40px;}        .content07{border: #E3E3E3 thin solid;background-color:#9999CC; height:75px;display:none;}    </style>    <script type="text/javascript"  src="jquery-1.3.2.min.js"></script>    <script type="text/javascript">    $(document).ready(function(){       $(".d1,.d2,.d3").click(function(){        $(this).find("div[class='content07']").slideToggle("slow");       });    });    </script> </HEAD> <BODY><div class="d1">  <div class="title">d1</div>  <div class="content07">content07</div>  <div class="content07">content07</div>  <div class="content07">content07</div></div><div class="d2">  <div class="title">d2</div>  <div class="content07">content07</div>  <div class="content07">content07</div>  <div class="content07">content07</div>  <div class="content07">content07</div>  <div class="content07">content07</div> </div><div class="d3">  <div class="title">d3</div>  <div class="content07">content07</div>  <div class="content07">content07</div></div> </BODY></HTML> 

热点排行