您好,欢迎来到呆呆养生。
搜索
您的当前位置:首页原生js做的手风琴效果的导航菜单_javascript技巧

原生js做的手风琴效果的导航菜单_javascript技巧

来源:呆呆养生


做好的手风琴效果如下,具体看代码:

html代码
代码如下:




Accordion





level one



  • first item

  • second item

  • third item




  • level one



  • first item

  • second item

  • third item




  • level one



  • first item

  • second item

  • third item






  • var heads = document.querySelectorAll(".first-level");
    function headClick(event){
    var target = EventUtil.getTarget(event);
    toggleDisplay(target.parentNode.querySelector("ul"));
    }
    for(var i=0;iEventUtil.addHandler(heads[i], "click", headClick);
    }

    window.onunload = function (){
    for(var i=0;iEventUtil.removeHandler(heads[i], "click", headClick);
    }
    heads = null;
    }

    common.js文件
    代码如下:
    var EventUtil = {
    addHandler : function (element, type, handler) {
    if (element.addEventListener) {
    element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
    element.attachEvent("on" + type, handler);
    } else {
    element["on" + type] = handler;
    }
    },
    removeHandler : function (element, type, handler) {
    if (element.removeEventListener) {
    element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
    element.detachEvent("on" + type, handler);
    } else {
    element["on" + type] = null;
    }
    },
    getEvent : function (event) {
    return event || window.event;
    },
    getTarget : function (event) {
    return event.target || event.srcElement;
    }
    }


    var getStyle = function (el, style) {
    if (el.currentStyle) {
    style = style.replace(/\-(\w)/g, function (all, letter) {
    return letter.toUpperCase();
    });
    var value = el.currentStyle[style];
    return value;
    } else {
    return document.defaultView.getComputedStyle(el, null).getPropertyValue(style);
    }
    }


    var toggleDisplay = function (element) {
    var display = getStyle(element, "display");
    if (display == "none") {
    element.style.display = "block";
    } else {
    element.style.display = "none";
    }
    }

    Copyright © 2019- ddzzz.cn 版权所有

    违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务