JavaScript+CSS下拉菜单系列（二）——伸缩个数不受限制，高度不固定的下拉菜单

来源：互联网发布：詹姆斯mvp赛季数据编辑：程序博客网时间：2024/05/07 16:10

需要用到的图片素材：

sina_music_menu_btn1.gif

sina_music_menu_btn2.gif

代码：<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:auto;
border:solid 1px #959595;
float:left;
}
.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:130px;
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">
function funHideShow(x,y){
if(x.className=="btn_down"){
   x.className="btn_up";
   document.getElementById(y).className="undis";
}
else{
   x.className="btn_down";
   document.getElementById(y).className="inf";
}
}
</script>
</head>

<body>
<div id="content">
<div class="btn_down"onclick="funHideShow(this,'a');">
   <span>蔡健雅-红色高跟鞋</span>
</div>
<div id="a" class="inf">
   <ul>
    <li>
    ·该怎么去形容你最贴切
    </li>
    <li>
    ·拿什么跟你做比较才算特别
    </li>
    <li>
    ·对你的感觉强烈
    </li>
    <li>
    ·却又不太了解只凭直觉
    </li>
   </ul>
</div>
<div class="btn_down"onclick="funHideShow(this,'b');">
   <span>蔡健雅-红色高跟鞋</span>
</div>
<div id="b" class="inf">
   <ul>
    <li>
    ·你像我在被子里的舒服
    </li>
    <li>
    ·却又像风琢磨不住
    </li>
    <li>
    ·像手纹像散发的香水味
    </li>
    <li>
    ·像爱不释手的红色高跟鞋
    </li>
   </ul>
</div>
<div class="btn_down"onclick="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>