JavaScript+CSS下拉菜单系列（四）

最新推荐文章于 2023-03-28 18:07:18 发布

dsfas3432

最新推荐文章于 2023-03-28 18:07:18 发布

阅读量284

点赞数

分类专栏：前台技术文章标签： javascript css class scroll function xhtml

本文链接：https://blog.csdn.net/dsfas3432/article/details/6840207

版权

前台技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>css+javascript下拉菜单系列(四)</title>
<style type="text/css">
body{background-color:#FFFFFF;}
#content{
width:231px;
height:201px;
border:solid 1px #959595;
float:left;
overflow:hidden;
}
.btn_up,.btn_down{
width:231px;
height:26px;
line-height:26px;
font-size:14px;
font-weight:bold;
clear:both;
cursor:pointer;
}
span{
display:block;
margin-left:15px;
}
.btn_up{
background:url(image/sina_music_menu_btn1.gif) transparent scroll no-repeat 0pt 0px;
}
.btn_down{
background:url(image/sina_music_menu_btn2.gif) transparent scroll no-repeat 0pt 0px;
}
.inf{
width:231px;
height:124px;
overflow:hidden;
float:left;
}
ul{
list-style:none outside;
padding:0px;
margin:0px;
}
li{
display:block;
font-size:12px;
color:#333333;
border-bottom:solid 1px #999999;
padding-left:15px;
height:30px;
line-height:30px;
}
.undis{display:none;}
</style>
<script type="text/javascript">
var inf_flag="c";
var btn_flag="btn3"
function funHideShow(x,y){
if(x.className=="btn_up"){
   x.className="btn_down";
   document.getElementById(y).className="inf";
   document.getElementById(btn_flag).className="btn_up";
   funMove(y,inf_flag);
   inf_flag=y;
   btn_flag=x.id;
}
}
function funMove(m,n){
var objOpen=document.getElementById(m);
var objClose=document.getElementById(n);
var closeH=parseInt(objClose.offsetHeight);
closeH-=10;
var openH=124-closeH;
if(closeH<=-5){
   objOpen.style.height=124+"px";
   objClose.style.height=0+"px";
   objClose.className="undis";
   return;
}
objOpen.style.height=openH+"px";
objClose.style.height=closeH+"px";
setTimeout("funMove('"+m+"','"+n+"')",50);
}
</script>
</head>

<body>
<div id="content">
<div id="btn1" class="btn_up"οnclick="funHideShow(this,'a');">
   <span>蔡健雅-红色高跟鞋</span>
</div>
<div id="a" class="inf undis">
   <ul>
    <li>
    ·该怎么去形容你最贴切
    </li>
    <li>
    ·拿什么跟你做比较才算特别
    </li>
    <li>
    ·对你的感觉强烈
    </li>
    <li>
    ·却又不太了解只凭直觉
    </li>
   </ul>
</div>
<div id="btn2" class="btn_up"οnclick="funHideShow(this,'b');">
   <span>蔡健雅-红色高跟鞋</span>
</div>
<div id="b" class="inf undis">
   <ul>
    <li>
    ·你像我在被子里的舒服
    </li>
    <li>
    ·却又像风琢磨不住
    </li>
    <li>
    ·像手纹像散发的香水味
    </li>
    <li>
    ·像爱不释手的红色高跟鞋
    </li>
   </ul>
</div>
<div id="btn3" class="btn_down"οnclick="funHideShow(this,'c');">
   <span>蔡健雅-红色高跟鞋</span>
</div>
<div id="c" class="inf">
   <ul>
    <li>
    ·我爱你有种左灯右行的冲突
    </li>
    <li>
    ·疯狂却怕没有退路
    </li>
    <li>
    ·你能否让我停止这种追逐
    </li>
    <li>
    ·就这么双最后唯一的红色高跟鞋
    </li>
   </ul>
</div>
</div>
</body>
</html>