2012-09-06 1,760 1

用JS控制DIV层的显示与隐藏

用JS控制DIV层的显示与隐藏
特点：可以控制一些层的显示，比如一些音乐播放器什么，这样页面看的就更整洁些。
所要用的js文件下载
ddaccordion

JS调用先确定是否调用了jquery.js


<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/ddaccordion.js"></script>
<script type="text/javascript">ddaccordion.init({headerclass: "mypets", contentclass: "thepet", collapseprev: true, defaultexpanded: [0], animatedefault: false, persiststate: true, toggleclass: ["", "H"], togglehtml: ["none", "", ""], animatespeed: "400"})</script>

persiststate: true
当为true的时候，默认不显示，如果是false则默认显示

需要设置DIV层的样式方法


<div id="pager"><!--Show/Hide Point star-->
<div headerindex="0h" class="mypets"><a class="login" href="#" >hide/show</a></div>
</div><!--开关显示-->
<div style="display:none" contentindex="0c" class="thepet">
<div>需要控制的层</div>
</div><!-- glo end -->

</div>

<div>需要控制的层</div>

</div>

CSS样式为


/*---头部滑动门---*/
#main #pager .mypets{float:right;width:143px;height:20px;margin-top:-26px!important;margin-top:-26px;margin-left:20px!important;margin-right:10px;position:relative;}
#main #pager a.login{display:block;width:143px;height:20px;background:url('images/login.gif') bottom;text-indent:-9999px;}
#main #pager .H a.login{background:url('images/login.gif') top;display:block;}
.thepet{width:980px;margin:0;padding:0;}

/*---头部滑动门---*/

#main #pager .mypets{float:right;width:143px;height:20px;margin-top:-26px!important;margin-top:-26px;margin-left:20px!important;margin-right:10px;position:relative;}