手风琴导航栏的实现

 

 

<style>/*属性重置css*/
           body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
html .hide{display:none;}</style>
<style>
ul li {
                height: 50px;
                width: 200px;
                overflow: hidden;
                -webkit-transition: height 1s;
            }
            #cal {
                width: 200px;
                height: 50px;
                color: #F35626;
                font-family: "微软雅黑";
                font-size: 20px;
                text-align: center;
                background-color: #5F9EA0;
                border: 1px solid #444444;
            }
            
            #tt {
                background-color: #f8f8f8;
                width: 200px;
            }
            
            #tt>ul>li {
                border-bottom: 1px solid #DDDDDD;
                text-align: center;
                height: 30px;
            }
            
            .current {
                height: auto;
                /*暂不可用*/
                -webkit-transition: height 1s;
            }</style>
<p>
<script type="text/javascript">// <![CDATA[
$(function() {
                var $div_li = $("#content >ul >li");
                $div_li.click(function() {
                    $(this).addClass("current").siblings().removeClass("current");
                })
            })
// ]]></script>
</p>
<div id="content">
<ul>
<li class="current">
<div id="gd">
<div id="cal">
<p>数码产品</p>
</div>
<div id="tt" class="title">
<ul>
<li>手机</li>
<li>电脑</li>
<li>mp3</li>
<li>平板</li>
<li>收音机</li>
</ul>
</div>
</div>
</li>
<li>
<div id="gd">
<div id="cal">
<p>服装鞋帽</p>
</div>
<div id="tt" class="title">
<ul>
<li>男装</li>
<li>女装</li>
<li>童装</li>
<li>箱包</li>
<li>鞋</li>
</ul>
</div>
</div>
</li>
<li>
<div id="gd">
<div id="cal">
<p>日化产品</p>
</div>
<div id="tt" class="title">
<ul>
<li>护手霜</li>
<li>护肤</li>
<li>美白</li>
<li>祛痘</li>
<li>去黑头</li>
<li>去黑头</li>
</ul>
</div>
</div>
</li>
<li>
<div id="gd">
<div id="cal">
<p>电子产品</p>
</div>
<div id="tt" class="title">
<ul>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
</ul>
</div>
</div>
</li>
<li>
<div id="gd">
<div id="cal">
<p>电子产品</p>
</div>
<div id="tt" class="title">
<ul>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
</ul>
</div>
</div>
</li>
</ul>
</div>

 

 

• 数码产品

  • 手机
  • 电脑
  • mp3
  • 平板
  • 收音机

• 服装鞋帽

  • 男装
  • 女装
  • 童装
  • 箱包
  • 鞋

• 日化产品

  • 护手霜
  • 护肤
  • 美白
  • 祛痘
  • 去黑头
  • 去黑头

• 电子产品

  • 手机
  • 手机
  • 手机
  • 手机
  • 手机

• 电子产品

  • 手机
  • 手机
  • 手机
  • 手机
  • 手机