vue与原生js，手风琴效果代码

最新推荐文章于 2024-04-06 09:10:45 发布

灰灰辉hui

最新推荐文章于 2024-04-06 09:10:45 发布

阅读量311

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_46450798/article/details/130505906

版权

核心：排他思想

vue写法：

html：

<div class="d-flex">
 <div class="slider_menu">
   <ul id="nav-pills" class="nav-pills">
     <li class="anchor"></li>
     <li class="pageTitle anchorActive">全部</li>
     <li class="pageTitle">示例1</li>
     <li class="pageTitle">示例2</li>
     <li class="pageTitle">示例3.0</li>
   </ul>
  </div>
</div>

css，使用了less预处理器：

动画效果，在移动元素中添加以下两行代码：

-webkit-transition: .35s;
transition: .35s;

.d-flex {
  margin-left: 12px;
  margin-top: 12px;
  display: flex;
  .slider_menu {
    position: relative;
    background: rgba(0,0,0,.1);
    border-radius: 50px;
    border: 3px solid transparent;
    overflow: hidden;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .nav-pills {
    display: flex;
    position: relative;
  }
  .anchor {
    background: #f1404b;
    border-radius: 100px;
    position: absolute;
    width: 58px;
    height: 28px;
    left: 0px;
    opacity: 1;
    -webkit-transition: .35s;
    transition: .35s;
  }
  .pageTitle {
    cursor: pointer;
    height: 28px;
    line-height: 28px;
    padding: 0 12px;
    z-index: 99;
    color: #888;
  }
  .anchorActive {
    color: #fff;
  }
}

js部分：

      前提：vue, data中变量：
      navList: {
        active: 1,
        navWidth: 58,
        navLeft:0
      }

      // 导航栏_手风琴效果
      onNavLevel1() {
        let ulList = document.getElementById('nav-pills');
        let ul_li = ulList.getElementsByTagName('li');
        console.log(ulList);
        for (let i = 0; i < ul_li.length; i++) {
          ul_li[i].index = i;
          let that = this
          ul_li[i].onmouseover = function () {
            that.setli(ul_li, this.index, this.offsetWidth, this.offsetLeft)
            console.log(this.offsetWidth);
          }
          ul_li[i].onclick = function () {
            // 保存点击后元素状态
            that.navList.active = this.index
            that.navList.navWidth = this.offsetWidth
            that.navList.navLeft = this.offsetLeft
          }
        }
        ulList.onmouseout = () => {
          this.setli(ul_li, this.navList.active, this.navList.navWidth, this.navList.navLeft)
        }
      },
      // 手风琴效果，状态改变
      setli(ul_li, active, navWidth, navLeft){
          // offsetWidth 自身宽度 offsetLeft 与已定位父元素左侧距离 `` es6模板字符串
          ul_li[0].style = `position: absolute; width: ${navWidth}px; height: 28px; left: ${navLeft}px; opacity: 1;`
          ul_li[active].classList.add('anchorActive')
          // 除去当前元素，其他兄弟元素状态清空 俗称：排他思想
          for(let j = 0; j<ul_li.length; j++){
            if(j != active){
              ul_li[j].classList.remove('anchorActive')
            }
          }
      }

原生js写法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>导航栏手风琴效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .d-flex {
        margin-left: 12px;
        margin-top: 12px;
        display: flex;
      }
      .d-flex .slider_menu {
        position: relative;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 50px;
        border: 3px solid transparent;
        overflow: hidden;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      .d-flex .nav-pills {
        display: flex;
        position: relative;
      }
      .d-flex .anchor {
        background: #f1404b;
        border-radius: 100px;
        position: absolute;
        width: 58px;
        height: 28px;
        left: 0px;
        opacity: 1;
        -webkit-transition: 0.35s;
        transition: 0.35s;
      }
      .d-flex .pageTitle {
        cursor: pointer;
        height: 28px;
        line-height: 28px;
        padding: 0 12px;
        z-index: 99;
        color: #888;
      }
      .d-flex .anchorActive {
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="d-flex">
      <div class="slider_menu">
        <ul id="nav-pills" class="nav-pills">
          <li class="anchor"></li>
          <li class="pageTitle anchorActive">全部</li>
          <li class="pageTitle">示例1</li>
          <li class="pageTitle">示例2</li>
          <li class="pageTitle">示例3.0</li>
        </ul>
      </div>
    </div>
    <script>
      let ulList = document.getElementById("nav-pills");
      let ul_li = ulList.getElementsByTagName("li");
      //   中间变量
      let navList = {
        active: 1,
        navWidth: 50,
        navLeft: 0,
      };
      for (let i = 0; i < ul_li.length; i++) {
        ul_li[i].index = i;
        let that = this;
        ul_li[i].onmouseover = function () {
          that.setli(ul_li, this.index, this.offsetWidth, this.offsetLeft);
        };
        ul_li[i].onclick = function () {
          // 保存点击后元素状态
          navList.active = this.index;
          navList.navWidth = this.offsetWidth;
          navList.navLeft = this.offsetLeft;
        };
      }
      ulList.onmouseout = () => {
        this.setli(ul_li, navList.active, navList.navWidth, navList.navLeft);
      };
      function setli(ul_li, active, navWidth, navLeft) {
        // offsetWidth 自身宽度 offsetLeft 与已定位父元素左侧距离 `` es6模板字符串
        ul_li[0].style = `position: absolute; width: ${navWidth}px; height: 28px; left: ${navLeft}px; opacity: 1;`;
        ul_li[active].classList.add("anchorActive");
        // 除去当前元素，其他兄弟元素状态清空 俗称：排他思想
        for (let j = 0; j < ul_li.length; j++) {
          if (j != active) {
            ul_li[j].classList.remove("anchorActive");
          }
        }
      }
    </script>
  </body>
</html>