原生javascript手风琴导航

来源：互联网发布：淘宝旅行网编辑：程序博客网时间：2024/05/18 18:03

原生javascript手风琴导航

html内容

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>原生javascript手风琴导航</title></head>    <link type="text/css" rel="stylesheet" href="css.css" charset="utf-8" /><body><div class="kc-index-baike">    <!-- 内科 -->    <div class="kc-sidebar-class kc-active">内科</div>    <div class="kc-sidebar-content kc-block">        <a href="http://xg1.zjyy166.com/wy/all/" title="胃炎">胃炎</a>        <a href="http://xg1.zjyy166.com/wky/all/" title="胃溃疡">胃溃疡</a>        <a href="http://xg1.zjyy166.com/gyh/all/" title="肝硬化">肝硬化</a>        <a href="http://xg1.zjyy166.com/bm/all/" title="便秘">便秘</a>    </div>    <!-- 妇产科 -->    <div class="kc-sidebar-class">妇产科</div>    <div class="kc-sidebar-content">        <a href="http://xg1.zjyy166.com/mjxydy%20/all/" title="霉菌性阴道炎 ">霉菌性阴道炎</a>        <a href="http://xg1.zjyy166.com/gjml%20/all/" title="宫颈糜烂 ">宫颈糜烂</a>        <a href="http://xg1.zjyy166.com/nfmst/all/" title="内分泌失调 ">内分泌失调</a>        <a href="http://xg1.zjyy166.com/wyzy%20/all/" title="外阴瘙痒 ">外阴瘙痒</a>        <a href="http://xg1.zjyy166.com/tj%20/all/" title="痛经 ">痛经</a>        <a href="http://xg1.zjyy166.com/lca%20/all/" title="卵巢癌 ">卵巢癌</a>        <a href="http://xg1.zjyy166.com/slgds%20/all/" title="输卵管堵塞 ">输卵管堵塞</a>        <a href="http://xg1.zjyy166.com/bdyc%20/all/" title="白带异常 ">白带异常</a>        <a href="http://xg1.zjyy166.com/gnxzgcx%20/all/" title="功能性子宫出血 ">功能性子宫出血</a>        <a href="http://xg1.zjyy166.com/jtl%20/all/" title="畸胎瘤 ">畸胎瘤</a>        <a href="http://xg1.zjyy166.com/gjaqbb%20/all/" title="宫颈癌前病变 ">宫颈癌前病变</a>        <a href="http://xg1.zjyy166.com/zgnma%20/all/" title="子宫内膜癌 ">子宫内膜癌</a>        <a href="http://xg1.zjyy166.com/dnlczhz%20/all/" title="多囊卵巢综合征 ">多囊卵巢综合征</a>        <a href="http://xg1.zjyy166.com/lczl%20/all/" title="卵巢肿瘤 ">卵巢肿瘤</a>        <a href="http://xg1.zjyy166.com/pqy%20/all/" title="盆腔炎 ">盆腔炎</a>        <a href="http://xg1.zjyy166.com/gja%20/all/" title="宫颈癌 ">宫颈癌</a>        <a href="http://xg1.zjyy166.com/zgnmxr%20/all/" title="子宫内膜息肉 ">子宫内膜息肉</a>        <a href="http://xg1.zjyy166.com/zgxjz%20/all/" title="子宫腺肌症 ">子宫腺肌症</a>        <a href="http://xg1.zjyy166.com/byby%20/all/" title="不孕不育 ">不孕不育</a>        <a href="http://xg1.zjyy166.com/zgnmywz%20/all/" title="子宫内膜异位症 ">子宫内膜异位症</a>        <a href="http://xg1.zjyy166.com/gwy%20/all/" title="宫外孕 ">宫外孕</a>        <a href="http://xg1.zjyy166.com/gjy%20/all/" title="宫颈炎 ">宫颈炎</a>        <a href="http://xg1.zjyy166.com/ydy%20/all/" title="阴道炎 ">阴道炎</a>        <a href="http://xg1.zjyy166.com/lcnz%20/all/" title="卵巢囊肿 ">卵巢囊肿</a>        <a href="http://xg1.zjyy166.com/yjsd%20/all/" title="月经失调 ">月经失调</a>        <a href="http://xg1.zjyy166.com/zgjl%20/all/" title="子宫肌瘤 ">子宫肌瘤</a>        <a href="http://xg1.zjyy166.com/rl%20/all/" title="人流 ">人流</a>        <a href="http://xg1.zjyy166.com/yc/all/" title="引产">引产</a>    </div>    <!-- 男科 -->    <div class="kc-sidebar-class">男科</div>    <div class="kc-sidebar-content">        <a href="http://xg1.zjyy166.com/fgy/all/" title="附睾炎">附睾炎</a>        <a href="http://xg1.zjyy166.com/gty/all/" title="龟头炎">龟头炎</a>        <a href="http://xg1.zjyy166.com/yny/all/" title="阴囊炎">阴囊炎</a>        <a href="http://xg1.zjyy166.com/jny/all/" title="精囊炎">精囊炎</a>        <a href="http://xg1.zjyy166.com/yncs/all/" title="阴囊潮湿">阴囊潮湿</a>        <a href="http://xg1.zjyy166.com/qlxy/all/" title="前列腺炎">前列腺炎</a>        <a href="http://xg1.zjyy166.com/qlxzs/all/" title="前列腺增生">前列腺增生</a>        <a href="http://xg1.zjyy166.com/qlxgh/all/" title="前列腺钙化">前列腺钙化</a>        <a href="http://xg1.zjyy166.com/qlxjs/all/" title="前列腺结石">前列腺结石</a>        <a href="http://xg1.zjyy166.com/qlxjh/all/" title="前列腺结核">前列腺结核</a>        <a href="http://xg1.zjyy166.com/qlxnz/all/" title="前列腺囊肿">前列腺囊肿</a>        <a href="http://xg1.zjyy166.com/qlxnz/all/" title="前列腺脓肿">前列腺脓肿</a>        <a href="http://xg1.zjyy166.com/qlxrl/all/" title="前列腺肉瘤">前列腺肉瘤</a>        <a href="http://xg1.zjyy166.com/yz/all/" title="阳痿">阳痿</a>        <a href="http://xg1.zjyy166.com/zx/all/" title="早泄">早泄</a>        <a href="http://xg1.zjyy166.com/xgnza/all/" title="性功能障碍">性功能障碍</a>        <a href="http://xg1.zjyy166.com/yj/all/" title="遗精">遗精</a>        <a href="http://xg1.zjyy166.com/bpgc/all/" title="包皮过长">包皮过长</a>        <a href="http://xg1.zjyy166.com/bj/all/" title="包茎">包茎</a>        <a href="http://xg1.zjyy166.com/yg/all/" title="隐睾">隐睾</a>    </div>    <!-- 不孕不育 -->    <div class="kc-sidebar-class">不孕不育</div>    <div class="kc-sidebar-content">        <a href="http://xg1.zjyy166.com/htgnbq/all/" title="黄体功能不全">黄体功能不全</a>        <a href="http://xg1.zjyy166.com/dnlczhz/all/" title="多囊卵巢综合征">多囊卵巢综合征</a>        <a href="http://xg1.zjyy166.com/slgy/all/" title="输卵管炎">输卵管炎</a>        <a href="http://xg1.zjyy166.com/slgds/all/" title="输卵管堵塞">输卵管堵塞</a>        <a href="http://xg1.zjyy166.com/plza/all/" title="排卵障碍">排卵障碍</a>        <a href="http://xg1.zjyy166.com/nxby/all/" title="男性不育">男性不育</a>        <a href="http://xg1.zjyy166.com/sjz/all/" title="死精症">死精症</a>        <a href="http://xg1.zjyy166.com/wjz/all/" title="无精症">无精症</a>        <a href="http://xg1.zjyy166.com/rjz/all/" title="弱精症">弱精症</a>        <a href="http://xg1.zjyy166.com/sjz/all/" title="少精症">少精症</a>        <a href="http://xg1.zjyy166.com/jsjmqz/all/" title="精索静脉曲张">精索静脉曲张</a>        <a href="http://xg1.zjyy166.com/jybyh/all/" title="精液不液化">精液不液化</a>     </div>    <!-- 性病科 -->    <div class="kc-sidebar-class">性病科</div>    <div class="kc-sidebar-content">        <a href="http://xg1.zjyy166.com/lb/all/" title="淋病">淋病</a>        <a href="http://xg1.zjyy166.com/md/all/" title="梅毒">梅毒</a>        <a href="http://xg1.zjyy166.com/rxz/all/" title="软下疳">软下疳</a>        <a href="http://xg1.zjyy166.com/szqzz/all/" title="生殖器疱疹">生殖器疱疹</a>        <a href="http://xg1.zjyy166.com/fljxndy/all/" title="非淋菌性尿道炎">非淋菌性尿道炎</a>        <a href="http://xg1.zjyy166.com/xjxydy/all/" title="细菌性阴道炎">细菌性阴道炎</a>        <a href="http://xg1.zjyy166.com/dcxydy/all/" title="滴虫性阴道炎">滴虫性阴道炎</a>    </div>    <!-- 手风琴js -->    <script src="squeezebox.js" type="text/javascript" charset="utf-8"></script>    <script>        window.onload = function() {            var box = getElementsByClassName("kc-sidebar-class");            var content = getElementsByClassName("kc-sidebar-content");            for (var i = 0, j = box.length; i < j; i++) {                box[i].index = i;                box[i].onclick = function() {                    var mm = content[this.index];                    for (var v = 0; v < j; v++) {                        if (v != this.index) {                            removeClass(content[v], "kc-block");                            removeClass(box[v], "kc-active")                        }                    };                    toggleClass(mm, "kc-block");                    toggleClass(this, "kc-active")                }            }        }    </script></div></body></html>

css 内容

a{text-decoration:none;}.kc-index-baike, .kc-sidebar-class, .kc-sidebar-content{ box-sizing: border-box; display:block; margin: 0 auto; padding:0;}.kc-index-baike{border:1px solid #efefef; border-bottom:none; margin-bottom:30px; position: relative; width: 300px; overflow: hidden;}.kc-sidebar-class{text-align:center; font-size: 16px; line-height:3em; color:#0a7cef; border-bottom:1px #efefef solid; cursor: pointer;}.kc-sidebar-content{border-bottom: 1px #efefef solid; font-size:0; padding: 10px 0; display:none; max-height:310px; overflow-y:auto;}.kc-sidebar-content a{box-sizing: border-box; color:#333; display:inline-block; width:50%; font-size:16px; line-height:2em; padding-left: 20px; vertical-align: middle;}.kc-sidebar-content a:hover{background-color:#efefef; color:#0a7cef;}.kc-active{background-color: #efefef;}.kc-block{display:block;}

javascript内容

var addClass = function(element, oClass) {    if (!hasClass(element, oClass)) {        element.className += ' ' + oClass    }}var hasClass = function(element, oClass) {    return element.className.match(new RegExp('(^|\\s)' + oClass + '(\\s|$)'))}var removeClass = function(element, oClass) {    var cls = new RegExp('(^|\\s)' + oClass + '(\\s|$)');    if (hasClass(element, oClass)) {        element.className = element.className.replace(cls, '')    }}var toggleClass = function(element, oClass) {    if (!hasClass(element, oClass)) {        addClass(element, oClass)    } else {        removeClass(element, oClass)    }}var getElementsByClassName = function(cname, oParent) {    if (oParent == null) {        oParent = document    };    if (oParent.getElementsByClassName) {        return oParent.getElementsByClassName(cname)    } else {        var all = oParent.getElementsByTagName("*");        var j = all.length;        var theClass = new RegExp("(^|\\s)" + cname + "(\\s|$)");        var result = new Array();        for (var i = 0; i < j; i++) {            var allClass = all[i].className;            if (theClass.test(allClass)) {                result.push(all[i])            }        }        return result;    }}var getStyle = function(element, prop) {    if (element.currentStyle) {        return element.currentStyle[prop]    } else {        return window.getComputedStyle(element)[prop]    }}

阅读全文

0 0