夜间模式CodeSnippetStyle:
日间模式CodeSnippetStyle:

0%


001_创建一个sidebar切换页面

Table Of Content
准备
基本思路
实现

我们期望实现这样的效果:

![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200113093836957-1748170485.gif)

准备

这是一个基础的准备,仅仅含有html/css文件。 下载link

这是我们学习制作一个sidebar页面之前的准备,我们接下来只关注js部分的实现。

在以上准备文件中,如果你下载完毕,双击index.html ,然后按F12,将看到以下页面:

在这里,你会看到,预留了一个diaplay属性:

如果你去掉display前面的小勾,即取消应用该属性,你将会看到以下页面:

该页面,就是我们接下来希望通过js来控制切换的sidebar页面。 你可以通过阅读提供的准备代码,了解该页面的编写。

基本思路

我们的核心想法是,是通过JS控制CSS属性,来实现sidebar的展开与收缩,更确切的想法,我们给sidebar加上一个名为hide的class,页面初始加载,hide有display:none生效,即默认sidebar是折叠的。 然后,如果点击展开按钮,那么触发js逻辑,移除该hide属性。点击sidebar,加会hide属性。 然后加上transition动态效果。 就能实现我们预期的效果。 还是看代码实现。

实现

JS

创建一个名为index.js的文件,并我们的index.html文件中引入,需要注意的是,我们的js逻辑操作的是dom,所以在引入的时,要再dom加载完成之后再引入,即在文档最后引入。在我们实现的js逻辑如下:

let app = {}

document.querySelector('.sidebar').addEventListener('click',function(){
    console.log("close")
    app.closeSidebar()
})

document.querySelector('.header-left-btn').addEventListener('click',function(){
    console.log("open")
    app.openSidebar()
})

app.closeSidebar = function(){
    document.querySelector('.sidebar').classList.add('hide')
}

app.openSidebar = function(){
    document.querySelector('.sidebar').classList.remove('hide')
}

说明

我们实现的最简单的功能,是点击header的左边按钮,sidebar展开,点击展开的sidebar任何位置,sidebar收起。

CSS

.hide{
    display: none;
}

.sidebar.hide {
    display: block;
    left: -70%;
}
.sidebar{
    transition:left 0.5s;
}

完整代码实现:Link

posted @ 2020-01-11 16:48  暮冬有八  阅读(519)  评论(0编辑  收藏  举报
BACK TO TOP

😀迷海无灯听船行。Github WeChat