• 纵向折叠二级菜单(无限点击)


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html id="Cov" xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <title>lefter</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style/style.css" type="text/css" rel="Stylesheet" />
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/myjs.js" type="text/javascript"></script>
    </head>

    <body id="lefter">
    <strong id="callName">管理员:admin</strong>
    <ul id="leftMenu">
    <li class="li1">菜单菜单1</li>
    <li class="li2">
    <ul>
    <li><a href="">菜单菜单</a>
    </li>
    <li><a href="">菜单菜单</a>
    </li>
    <li><a href="">菜单菜单</a>
    </li>
    <li><a href="">菜单菜单</a>
    </li>
    </ul>
    </li>
    <li class="li1">菜单菜单2</li>
    <li class="li2">
    <ul>
    <li><a href="">菜单菜单</a>
    </li>
    <li><a href="">菜单菜单</a>
    </li>
    <li><a href="">菜单菜单</a>
    </li>
    <li><a href="">菜单菜单</a>
    </li>
    </ul>
    </li>
    <li class="li1">菜单菜单3</li>
    <li class="li2">
    <ul>
    <li><a href="">菜单菜单</a>
    </li>
    <li><a href="">菜单菜单</a>
    </li>
    <li><a href="">菜单菜单</a>
    </li>
    <li><a href="">菜单菜单</a>
    </li>
    </ul>
    </li>
    <li class="li1">菜单菜单4</li>
    <li class="li2">
    <ul>
    <li><a href="">菜单菜单</a>
    </li>
    <li><a href="">菜单菜单</a>
    </li>
    <li><a href="">菜单菜单</a>
    </li>
    <li><a href="">菜单菜单</a>
    </li>
    </ul>
    </li>
    </ul>
    </body>

    </html>

    =======================

    /* 通用样式 */

    *,
    form {
    margin: 0;
    padding: 0;
    }
    img {
    border: 0
    }
    body {
    font-family: 宋体, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #3d3d3d;
    background: #fff;
    100%;
    height: 100%;
    margin: 0 auto 0 auto;
    }
    ul {
    list-style: none;
    }
    a {
    text-decoration: none;
    margin: 0 2px 0 2px;
    color: #000;
    }
    a:hover {
    text-decoration: underline;
    }
    html {
    height: 100%;
    100%;
    }
    #Cov {
    overflow: hidden;
    }
    #loginBody {
    background: url(../images/loginBg.jpg) no-repeat left top;
    position: relative;
    }
    #loginBox {
    position: absolute;
    top: 230px;
    left: 330px;
    340px;
    }
    #loginBox li {
    height: 30px;
    }
    #loginBox li span {
    display: block;
    80px;
    height: 26px;
    line-height: 26px;
    text-align: right;
    float: left;
    padding-right: 8px;
    color: #FFF
    }
    .txtSty {
    float: left;
    200px;
    height: 24px;
    line-height: 24px;
    border: 1px #1570b2 solid;
    background: #dcedf9;
    font-size: 14px;
    }
    .txtSty2 {
    border: 1px #5eb5f4 solid;
    background: #FFF;
    }
    #img_code {
    100px;
    }
    #loginBut {
    101px;
    height: 38px;
    background: url(../images/loginBut.gif) no-repeat;
    border: 0;
    float: right;
    margin: 20px 45px 0 0;
    }
    #header {
    height: 87px;
    background: url(../images/topBg.jpg) repeat-x;
    }
    #headerMenu {
    float: right;
    100px;
    padding-top: 63px;
    }
    #headerMenu li {
    float: left;
    margin-right: 10px;
    }
    #headerMenu li a {
    color: #FFF
    }
    #drag {
    7px;
    height: 100%;
    text-align: center;
    background: url(../images/dragBg.gif) repeat-y;
    }
    #dgimg {
    cursor: pointer;
    margin-top: 150px;
    }
    #lefter {
    186px;
    height: 100%;
    background: #0a3a61;
    text-align: center;
    }
    #callName {
    display: block;
    186px;
    height: 31px;
    line-height: 30px;
    background: url(../images/menuBg1.jpg) no-repeat;
    color: #FFF
    }
    #leftMenu {
    padding-top: 10px;
    186px;
    }
    .li1 {
    100%;
    height: 31px;
    line-height: 31px;
    font-weight: bold;
    color: #fff;
    background: url(../images/menuBg2.jpg);
    cursor: pointer;
    margin-bottom: 1px;
    }
    .li2 {
    100%;
    display: none;
    }
    .li2 ul li {
    100%;
    height: 31px;
    line-height: 31px;
    color: #fff;
    background: url(../images/menuBg3.jpg);
    cursor: pointer;
    margin-bottom: 3px;
    }
    .li1 a {
    color: #FFF
    }
    .li2 a {
    color: #a9d5e0
    }
    #main {
    99.6%;
    height: 99.6%;
    border: 1px #FFF solid;
    background: #d9e5ee;
    text-align: center;
    }
    .myTab {
    99.3%;
    margin-top: 4px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    margin-bottom: -1px;
    }
    .myTab .tab1 {
    display: inline;
    height: 25px;
    line-height: 25px;
    background: url(../images/tab1_l.gif);
    float: left;
    margin-right: 2px;
    padding-left: 5px;
    }
    .myTab .tab2 {
    display: inline;
    height: 25px;
    line-height: 25px;
    background: url(../images/tab2_l.gif);
    float: left;
    margin-right: 2px;
    padding-left: 5px;
    }
    .myTab .tab1 a,
    .myTab .tab2 a {
    float: left;
    display: block;
    80px;
    text-align: center;
    font-weight: bold;
    color: #134a74;
    white-space: nowrap;
    margin-top: 2px;
    }
    .myTab .tab2 a {
    font-weight: normal;
    color: #a5afba;
    }
    .myTab .tab1 img,
    .myTab .tab2 img {
    float: left;
    }
    .cBox {
    border: 1px #c8d6e1 solid;
    background: #FFF;
    99%;
    height: 94%;
    overflow: auto;
    }
    .cBox .tabCon {
    97%;
    margin: 10px;
    text-align: left;
    display: none;
    }
    .conT {
    color: #7a8791;
    padding: 2px 8px;
    display: block;
    60px;
    text-align: center;
    white-space: nowrap;
    margin: 0 0 -10px 10px;
    position: relative;
    z-index: 10;
    background: #FFF;
    }
    .conBox {
    100%;
    overflow: auto;
    border: 1px #e6eaed solid;
    margin-bottom: 10px;
    }
    .searForm {
    margin: 10px 5px 5px 5px;
    background: #F9F9F9
    }
    .searForm li {
    height: 26px;
    line-height: 26px;
    border-bottom: 1px #c8d6e1 dashed;
    }
    .searForm li.oddColor {
    background: #e8eff5;
    }
    .searForm li .searLab {
    float: left;
    display: block;
    100px;
    text-align: right;
    padding-right: 5px;
    }
    .searForm li .searInput {
    float: left;
    display: block;
    text-align: left;
    }
    .table1 {
    border: 1px #d3dfda solid;
    98%;
    margin: 10px auto 5px auto;
    background: #FFF;
    }
    .table1 thead {
    height: 24px;
    100%;
    }
    .table1 thead td {
    background: url(../images/ls4.gif) repeat-x;
    font-weight: bold;
    color: #2d2d2d
    }
    .table1 tbody tr {
    height: 24px;
    line-height: 24px;
    background: #f9f9f9;
    }
    .table1 tbody tr.oddColor {
    background: #e8eff5;
    }
    .table1 tbody tr.overColor {
    background: #f2ffc0;
    }
    .table1 tfoot td {
    height: 26px;
    line-height: 26px;
    background: #eef0e7;
    text-align: right;
    padding-right: 20px;
    }
    .alignL {
    text-align: left;
    padding-left: 10px;
    }
    .alignM {
    text-align: center;
    }
    .alignR {
    text-align: right;
    padding-right: 10px;
    }

    ==========================

    $(function(){

    $(".li2").slideUp("slow");
    $(".li2:eq(0)").slideDown("slow");

    $(".li1").live("click",function(){
    var flag = $(this).next().css("display");

    if(flag=='none'){
    $(this).next().slideDown("slow");
    }else{
    $(this).next().slideUp("slow");
    }
    });

    });

     ======================

    这个区别于上一个纵向,这个是可以无限点击一级菜单的,同时展开二级菜单,可以同时展现
    上一个是只能点击一个一级菜单,展现一个二级菜单,不能同时展现,注意区别
     
     
  • 相关阅读:
    mac安装完anaconda后,环境变量设置
    axios如何发送Basic Auth
    Django自带认证系统邮件模板自定义
    Ajax与Flask传值的跨域问题
    一道XXE漏洞和SSRF结合的题目
    如何分多次Pull requests
    如何使用C#写个多简单文档编辑器
    如何用Tkinter写个计算器
    LCTF2017学到的姿势
    Python 学习之路
  • 原文地址:https://www.cnblogs.com/leshao/p/4651656.html
Copyright © 2020-2023  润新知