当前位置:首页 > 代码 > 正文

关于后台左侧导航展开折叠代码的信息

admin 发布:2022-12-19 20:10 126


本篇文章给大家谈谈后台左侧导航展开折叠代码,以及对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

vue+element 后台管理系统-折叠侧边导航栏

# vue+element 后台管理系统-折叠侧边导航栏

## 1. 在头部组件中添加折叠按钮

**template:**

```javascript

template

!-- 折叠按钮 --

div class="collapse-btn" @click="collapseChage"

    i v-if="!collapse" class="bg-icon bg-icon-el-icon-s-fold"/i

    i v-else class="bg-icon bg-icon-el-icon-s-unfold"/i

/div

/template

```

**script:**

```javascript

script

// 通过bus通信

import eventBus from "@/utils/eventBus/eventBus.js"

data() {

      return {

          collapse: false,

      }

},

methods: {

    // 侧边栏折叠

  collapseChage() {

      this.collapse = !this.collapse;

      eventBus.$emit('collapse', this.collapse);

  },

}

/script

```

## 2. 在侧边导航栏的组件中添加控制的属性

**template:**

```javascript

template

    el-menu class="hc-menu" :collapse="collapse"

      el-menu-item class="hc-menu-item"导航一/el-menu-item

      el-menu-item class="hc-menu-item"导航二/el-menu-item

      el-menu-item class="hc-menu-item"导航三/el-menu-item

    /el-menu

/template

```

**script:**

```javascript

script

// 通过bus通信

import eventBus from "@/utils/eventBus/eventBus.js"

data() {

      return {

          collapse: false,

      }

},

created() {

    eventBus.$on('collapse', msg = {

        this.collapse = msg;

    });

}

/script

```

layui侧边栏折叠和展开效果该怎么实现

1、首先引入layui的样式代码。

2、然后创建html代码,添加上layui的导航样式,layui-nav。

3、运行页面,这时就可以看到一个美观的导航菜单了。

4、现在的菜单右边有很多空白的地方,可以添加样式,为导航栏条目添加长度,让其布满页面。添加一个样式,注意样式名和刚才默认的样式名一样。添加width:25%的样式。

5、再次运行页面,现在导航栏的条目布满了,没有留下过多的空白了。

左侧菜单栏折叠展开效果-超级简单

分享一个常见于管理后台的左侧菜单栏折叠展开的效果,基于jquery,效果图如下:

一:页面结构:

二:页面样式css,放在head标签里

三:引入jquery文件

四:给一级菜单绑定点击事件,点击时展开下面的子菜单

五:给二级菜单绑定事件,点击时加入选中的深色背景

六:阻止二级菜单点击发生冒泡,当点击二级菜单的时候,一级菜单的事件也会发生,此时二级菜单会被收起,因此需要阻止事件冒泡

原文作者技术博客:

95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。

欢迎留言交流

关于后台左侧导航展开折叠代码和的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;

本文地址:http://ahzz.com.cn/post/22300.html


取消回复欢迎 发表评论:

分享到

温馨提示

下载成功了么?或者链接失效了?

联系我们反馈

立即下载