手风琴菜单，且隐藏滚动条保留滚动功能

来源：互联网发布：简单工程造价软件编辑：程序博客网时间：2024/06/07 02:44
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/jquery-1.8.3.min.js"></script>    <script>        $(function () {            alert();            /*左侧导航区——手风琴*/            var Accordion = function (el, multiple) {                this.el = el || {};                this.multiple = multiple || false;                var links = this.el.find('.nav_li span');                links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)            };            Accordion.prototype.dropdown = function (e) {                var $el = e.data.el;                $this = $(this);                $next = $this.next();                $next.slideToggle();                $this.parent().toggleClass('active');                if (!e.data.multiple) {                    $el.find('.childrenUl').not($next).slideUp().parent().removeClass('active');                    /* $el.find('.list').not($next).slideUp();*/                }            };            var accordion = new Accordion($('.nav_ul'), false);        });    </script>    <style>        *{margin: 0;padding: 0;list-style: none;}        .nav_wrap{            width: 200px;            height: 400px;            overflow: hidden;            border: 1px solid #ccc;            margin: 20px auto;        }        .nav_ul{            width: 220px;            height: 100%;            overflow-y: auto;            overflow-x: hidden;        }        .nav_li{            border: 1px solid #ccc;            margin: -1px; /*去除边框重叠*/            line-height: 40px;            text-align: center;            font-size: 12px;        }        .childrenUl{            display: none;        }        .childrenLi{            width: 100%;            line-height: 30px;            font-size: .9em;            margin-top: 1px;            background: #63B8FF;            color: #000000;            padding-left: 15px;            cursor: pointer;        }    </style></head><body><div class= "nav_wrap">    <ul class= "nav_ul">        <li class="nav_li">            <span>我是菜单1</span>            <ul class="childrenUl">                <li class="childrenLi"><span>我是菜单1C</span></li>                <li class="childrenLi"><span>我是菜单1C</span></li>                <li class="childrenLi"><span>我是菜单1C</span></li>            </ul>        </li>        <li class="nav_li">            <span>我是菜单2</span>            <ul class="childrenUl">                <li class="childrenLi"><span>我是菜单2C</span></li>                <li class="childrenLi"><span>我是菜单2C</span></li>                <li class="childrenLi"><span>我是菜单2C</span></li>            </ul>        </li>        <li class="nav_li">我是菜单3</li>        <li class="nav_li">我是菜单4</li>        <li class="nav_li">我是菜单5</li>        <li class="nav_li">我是菜单6</li>        <li class="nav_li">我是菜单7</li>        <li class="nav_li">我是菜单8</li>        <li class="nav_li">我是菜单9</li>        <li class="nav_li">我是菜单10</li>        <li class="nav_li">我是菜单11</li>        <li class="nav_li">我是菜单12</li>        <li class="nav_li">我是菜单13</li>        <li class="nav_li">我是菜单14</li>        <li class="nav_li">我是菜单15</li>        <li class="nav_li">我是菜单16</li>        <li class="nav_li">我是菜单17</li>        <li class="nav_li">我是菜单18</li>        <li class="nav_li">我是菜单19</li>        <li class="nav_li">我是菜单20</li>        <li class="nav_li">我是菜单21</li>        <li class="nav_li">我是菜单22</li>        <li class="nav_li">我是菜单23</li>        <li class="nav_li">我是菜单24</li>    </ul></div></body></html>
阅读全文
0 0