实现类似JQuery的工具函数slideDown,优化的下拉菜单

今天发现以前写的一个下拉菜单有bug，所以优化了一下，实现类似JQuery的工具函数slideDown，顺便把菜单优化。

先说一下，之前的下拉菜单需要优化的地方，由于使用的是css实现定好的高度值，所以每次<li>高度变化，都得更改css。

之前采用的是<ul>和<li>标签实现的下拉列表，在这里面当其中一个li标签的高度变得比其他连个高的时候，<ul>中所有的<li>标签都会显示最高<li>标签的高度（例如：第二个<li>内容高度为150px，前后两个<li>内容高度为90px，这是显示的结果是所有的<li>高度都是150px），所以本例子不使用<ul>和<li>。

优化后的效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>实现类似JQuery的工具函数slideDown,优化的下拉菜单</title>
<style>
.wrap {
  display:inline-block;
}
.level1 {
  float:left;
  display:inline-block;
  width: 100px;
  background-color: skyblue;
  text-align: center;
}

.level1>.level2>div,
.level1>.mu1 {
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}
.level1>.mu1{
  border-right: 1px solid #000;
}
.level1>.mu1:last-child {
  border: none;
}
div.level2 {
  background-color: red;
}
</style>
</head>
<body>
  <div class='wrap'>
    <div class='level1'>
      <div class='mu1'>一级菜单1</div>
      <div class='level2'>
        <div>二级菜单1</div>
        <div>二级菜单1</div>
      </div>
    </div>
    <div class='level1'>
      <div class='mu1'>一级菜单2</div>
      <div class='level2'>
        <div>二级菜单2</div>
        <div>二级菜单2</div>
        <div>二级菜单2</div>
        <div>二级菜单2</div>
      </div>
    </div>
    <div class='level1'>
      <div class='mu1'>一级菜单3</div>
      <div class='level2'>
        <div>二级菜单3</div>
        <div>二级菜单3</div>
      </div>
    </div>
  </div>
<script>
let addClass = (node, className) => {
  let current = node.className || '';
  if ((' ' + current + ' ').indexOf(' ' + className + ' ') === -1) {
    node.className = current ? (current + ' ' + className) : className;
  }
}
let delClass = (node, className) => {
  let current = node.className || '';
  node.className = (' ' + current + ' ').replace(' ' + className + ' ', ' ').trim();
}
let addEvent = document.addEventListener ?
  (elem,type,listener,useCapture)=>{
    elem.addEventListener(type,listener,useCapture);
  } :
  (elem,type,listener,useCapture)=>{
    elem.attachEvent('on'+type,listener);
  };
// 获取准确的高度 
let getStyle = (element, cssPropertyName) => {
  if (window.getComputedStyle) {
    console.log(window.getComputedStyle(element)[cssPropertyName])
    return window.getComputedStyle(element)[cssPropertyName];
  } else {
    cssPropertyName = cssPropertyName.replace(/\-([a-z])/, function(value, lower) {
      return lower.toUpperCase();
    });
    return element.currentStyle[cssPropertyName];
  }
}
// 下拉函数
// time 单位‘秒’，浮点数
// defaultHeight 未展开时的显示高度
// node 折叠的节点
let slideDown = (node,defaultHeight,time) => {
  let height = Number.parseInt(getStyle(node,'height'));
  console.log('height:',height);
  node.style.height = defaultHeight+'px';
  node.style.overflow = 'hidden';
  node.style.transition = 'all '+time+'s '+'linear';
  addEvent(node,'mouseenter',()=>{
    node.style.height = height+'px';
  })
  addEvent(node,'mouseleave',()=>{
    node.style.height = defaultHeight+'px';
  })
}

let nav = document.getElementsByClassName('level1')
// console.log(nav);
for (let i = 0, item; item = nav[i]; i++) {
  slideDown(item,30,0.3);
}
</script>
</body>
</html>

优化的函数名字是slideDown，本例子为了实现该效果，还做了兼容低版本浏览器的样式获取函数getStyle。

如果我的文章有写的不好的地方，还请各位大神予以指教，感激不尽。

实现类似JQuery的工具函数slideDown,优化的下拉菜单

猜你喜欢