• 手风琴导航栏的实现


    <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,5b8b4f53;}
    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
      • 平板
      • 收音机
    • 服装鞋帽

      • 男装
      • 女装
      • 童装
      • 箱包
    • 日化产品

      • 护手霜
      • 护肤
      • 美白
      • 祛痘
      • 去黑头
      • 去黑头
    • 电子产品

      • 手机
      • 手机
      • 手机
      • 手机
      • 手机
    • 电子产品

      • 手机
      • 手机
      • 手机
      • 手机
      • 手机
    一切为了梦想!
  • 相关阅读:
    JSP学习笔记(一):JSP语法和指令
    小知识随手记(五)
    jQuery序列化表单数据 serialize()、serializeArray()及使用
    Servlet学习笔记(三):HTTP请求与响应
    Servlet学习笔记(二):表单数据
    AJAX前台传过来的中文在后台获取是乱码问题
    Servlet学习笔记(一):生命周期
    Servlet介绍以及简单实例
    jsp+servlet+jdbc实现对数据库的增删改查
    UML类图符号解释
  • 原文地址:https://www.cnblogs.com/wenqd/p/5035983.html
Copyright © 2020-2023  润新知