00:00
在上次课程当中啊,咱们已经将右侧侧边栏当中所有的布局咱们都已经完成了。那么本次课程呢,咱们将最后一个功能来完成,点击这个按钮能够实现诶,侧边栏展开和收起的一个效果,当然顺便咱们还需要实现什么这个按钮图标的一个变化,好了,那既然啊,它也是一个新的功能,打开咱们index.js的文件。加上一行注释,叫做右边侧边栏。的点击效果。嗯,来,Function写上write。四类的,嗯,加上一个半的吧。好,那么这个函数啊,咱们声明了之后,咱们就需要来调用一下子。写好了之后,咱们就得想一想它的思路,嗯,它的思路啊,我把咱们自己写的这个页面啊,咱们给它跑起来。
01:04
首先大家想一想啊,我是不是得先找到咱们现在的这个按钮元素BTS。对吗?然后我呀,这是咱们刚才来进行测试的时候,是把它给变成展开的状态,对吗?来我呀,找到咱们对应的一个CSS文件拉到最后。诶,我就没有去再去折起来啊,拉到最后就一样的。找到咱们不是这里。哎,在这儿,哎在这儿啊,咱们这个位置原来是不是为负294来着,对吧?嗯,负294啊好,那么它现在这个位置呢,是一个关闭的状态,我想要让它实现面板当中的一个切换,来咱们看原来人家给咱们的位置是一个为负294和零,嗯和零。
02:00
给它复制一份,咱们把这个close啊,给它写成open,诶当它打开的时候呢,咱们默认为零,诶这个位置是咱们面板当中的啊好,还有一个呢,是咱们BTN,那么BTN呢,咱们在进行打开的时候又画了一张图,诶这给它变成大写啊,好看。那么这张图的一个地址,咱们来找一下吧,来点点完了之后呢,咱们右键检查看一下人家的这个地址叫什么叫cross对吧?诶叫cross把它改一下啊。好了,那么现在按钮当中有关闭状态和打开,然后面板呢也有关闭和打开,诶两个样式咱们都已经写好了,写好了之后第一步,第一步先找到咱们的按钮元素,发生点击事件。诶发生点击事件,好在这块我呢就一样,咱们需要先写一点,我就给你来引导一点啊来引导一点。
03:03
嗯,把咱们对应的这个页面,咱们给它运行一下,找到当前的这个位置,检查在这里啊,不要选上面这个啊,是咱们选咱们这个BTN的基础样式。来找到它,加上一个YBTS等于document.cor select,那么现在啊,这个BT元素找到了之后。嗯,前面加点注释吧,写上找按钮元素。这是第一个。来第二个发生点击事件。嗯,BTNS点上on click等于方啊等于方好,那么现在啊,我点点完了之后,你会发现它其实是不是就是两个状态之间的一个切换,要么是一个叉,要么是一个横道。好,那既然它有两个状态,那我是不是可以提前来记录一个状态?
04:06
记录初始状态。那么像这种记录初始状态的呢,咱们啊,一般习惯都把它叫成不耳直,当然这个变量咱们一般要么叫做T,要么叫做flag,你说老师我起别的名行不行啊,行,只不过就显得你外行了,哎,显得你外行了啊来点完了之后呢,咱们需要来进行判断,说问,如果你现在这个flag它为真。好,那你得知道这个flag为真,它当前是一个什么样的状态呀,关闭吧,是不是,诶因为它默认情况下是不是就是这种关闭的,如果关闭好,我点开给它变成一个时差展开的状态。否则你如果是展开,我就在怎么着关闭,嗯,关闭好,那么在展开关闭的时候,其实咱们主要要做的也无外乎就是两件事。
05:09
啊,无外乎就两件事,一个什么,把这个按钮的图标变了,诶把它里边的这个content当中的定位的位置给它变了,也就这两件事啊也就这两件事,好来咱们上面的思路,第一个咱们是不是要加点击事件对吧?嗯,来第二步加完点击事件之后。嗯,记录一个初始的状态,再点击。事件的内部进行判断,这是咱们目前所写到的这个代码,对吧?好,那你来想一想吧,那只要是展开,我怎么知道它是展开,我说展开它就是展开吗?不是吧,你是不是得让它现在这个flag等于false。不等于触是不是就等于任何的值?只要不为触,它是不是就默认?咱们可以认为它是一个展开的状态,然后关闭好,那么就也为处。也就是说我在这需要设置为a flag等于false,还有flag等于处。
06:16
哎,这两种状态呢,分别它是对于原来状态的一种取反,如果你为真,我就为假,如果伪为假,那你就为真。好,除了这种写法之外,咱们也可以一次性喝成,无论你这个if else到底执行于谁。那么我的flag是不是都是在自身状态当中来进行取反?好,我在这写上啊,无论前面的if和else直行的到底是谁。那么最终咱们flag。的状态都是在原来基础之上进行什么取法,A进行取法。
07:04
那么,何不flag等于叹号flag?那叹号是不是咱们的逻辑非呀?那非真是不是就为假?那非假是不是就为真?那你还需要一句话一句话的去写吗?不需要了,好,那此处你是不是该觉得妙啊?是不是?诶,两句话一下子被我搞成了一句话,嗯,好,那这是咱们在展开当中应该做的,是它自己的这个按钮,点name等于什么?来,我把这个JS文件给它甩到一边。把这个整体页面呢,咱们给它拉到最下方来看他此时自己的这个元素,别光写这个什么close,把BTS给漏掉了,不行啊。如果我为展开,那这是不是应该变成BTN?
08:03
如果你没关闭好,我这是不是就应该写成?Close。是不是这个道理?对吧,来,咱们去试验一下。来点变了变变了吧,诶再点再点再点再点,两个状态能不能相互之间切换可以。除了他之外,咱们还有谁,是不是还有这个整体的内容面板。哎,当然这个整体的这个侧边栏在这儿,当然你如果把它的定位改了之后,我是不是才能看见它中间的一个内容区域,所以在上方,哎,咱们还得再写上一个啊。嗯,我先写代码吧,然后一会儿咱们再去写思路啊。在这儿,咱们需要找到侧边栏。查找侧边栏元素,这个变量等于document,点上selector。
09:02
嗯,在这儿呢,咱们点击右键,然后找到这个位置,诶一样啊,选择它的基础的这个样式。好,那么这个侧边栏元素找到了之后,那它展开之后的class是不是就是在它基础之上,把咱们的a side close变成aside open?所以这就为什么咱们一开始在定义名字的时候,我一个叫做关闭,一个叫做打开,道理就在这儿了,嗯,来把这个代码咱们给它贴一下吧。好写完了之后啊,我在这没有用的,咱们提前给它关掉啊,来刷新这打开点右边的是不是来给它展开,再点是不是收回去了。嗯,收回去了,非常不错。诶非常不错啊,这样的话呢,咱们就实现了它的一个点击查找对应的元素,而且能够让它实现展开和收取的状态。
10:03
来,那咱们最后的一个思路,其实代码都实现了,你在这无非也就在做一个什么小总结,诶也在做个小总结啊。先找的是按钮,然后发生点击事件,然后记录初始状态,然后呢给咱们的事件内容。在点击的事件内容当中进行一个判断,嗯,如果为关闭,则展开。否则为关闭。诶,这其实就是什么状态的取反对吧,这就是咱们之前写的状态的取反。然后说如果为。展开。则需要设置咱们的按钮和侧边栏对应的可拉斯效果。诶,那咱们的一个关闭亦如此。
11:02
嗯,两边其实道理都是一样的啊,道理都是一样的,好了,这样的话,咱们这个函数就完成了右侧导航栏点击切换状态的一个实现。
我来说两句