00:01
我们看下一个,下一个比较简单啊,开始几个功能,前面几个功能都是特别简单的功能。啊,下一个呢,跟那个显示隐藏也是很类似,我先把它放这里,我们来看一下,我先说一下什么样的效果。看一下这个。这个是一,就是这个菜单的切换的显示二级菜单,看懂了吗?啊,当我去停在这一个一级菜单下面,它对应的二级菜单就是显示的啊,当我离开它的时候呢,就显示的是另外一个。其实跟这个没什么太大的不一样啊,只是这一次有人说老师为什么不不把他们开始一起做完,就为什么开始做他的做前面这个显示隐藏的时候,为什么不把它也做了,因为他们的规律不太一样。能懂吧,我们一个函数只能是不是做相同规律的一批元素的一些操作呀,你的元素规律不太一样,就没办法通过一个函数去操作了。
01:11
那现在呢,我们就要去做这个切换二级菜单的一个显示和隐藏,那我们要去还是一样去想刚才的这两个问题。对哪个元素绑定监什么监听,在监听回调函数中对哪个元素或者哪些元素进行什么样的动操作,这动操作很明显是不是就数和黑的呀。啊,关键是要找到那些元素。来看一看啊。审查。啊,审查这里呢,首先啊,我们对他啊,这个应该是对谁呢,我把这里面呢,打开一点,其实大家一看就能看的,大家看明白是怎么回事了。
02:02
来我再操作一下看看啊,来上去点。超过那个事件的那个发生效果的那个改变多米元素的应该是这一个div吧。看到这里面这个里面的这个div对不对,因为它的一会是block一会什么,那是吧,那发生事件的是谁呢。发生事件的啊,肯定要是它的负元素,对不对,为什么说是它的负元素呢?你就看了我在这里面停它隐藏了吗?没有,所以这一片区域是不是也是事件的区域啊,也是事件的区域才行。那既。这个时候怎么样保证这一片都是它的视线区域呢?其实非常简单。
03:01
你看吧。把门打开,把这个给关上,哎,我的那个东西呢,也找不到位置,也找到这个位置啊。哎,这里面。能看到吗?啊这一遍,其实这个div只有我们这阴影部分吗。是吗?不是大家看也包含了这个div,也就是他的I级开单看到了吧,只是二现在是什么隐藏的。一看就能看出来现在是什么显示的。好,那我们现在找到这个规律以后,下面我们就要去做一些处理了。啊,先把这个放大,接着呢,我要去啊截个图。
04:04
截一个图,嗯,现在呢,要在这个页面里面截图是吧。来看一下。我截个图呢,是要截这一部分,就看看把这一部分截都截下来得了啊。这问都解开。嗯,好,来复制。粘贴在这里。稍微可以把它拉大一点点。好,还是刚才几个问题啊,首先我们来想想我们目标是哪个元素呢?我们事件的目标是哪个元素?啊,是这个里面的各个什么。这个div是吧,还有这一个div是不是也是。对不对,那我怎么找到这个第二位呢。啊,先去找这个什么ID,再找他下面的是不是这两个孩子,我这个两个孩子的plus是不是都为这个好找吧,好找那好了,那下面一步就是给他们加什么什么样的监听,这个其实很简单啊,还是鼠标的什么一路一出,那就直接来个什么power就可以。
05:26
没问题吧,好,下面我们要说的事情啊,下面我们要说的事情是我们去对哪些元素进行多操作。其实非常简单,来,还是这个,换个颜色。是对这个元素。是不是啊,对这个元素,那这个元素跟它是不是有一定的关系,是不是它的上面的这个子元素啊,就上面的子元素好做什么样的操作呢?其实还是这个是吧,围标这里大家应该能看出来是做什么操作啊。
06:04
就这个更简单,来,我们来去给他做一下啊,做一下先记住这个名字啊,叫category items。来取个名字吧,这个是去干嘛呢?我们就来一个,呃,WHOLE2级菜单,那就子菜单呗,S。Many。啊,大概就这大概就这样来个什么方形。嗯,这里来空格啊,最好定义这个函数,并且去调用调用它。好,下面我们要在里面写,首先我要找到那个发生事件的那个元素,怎么找,首先找到它的副元素。
07:04
啊,那既然找找根据ID找吧,叫什么category谁。It SPA。它下面的什么div可不可以,其他下面是不是就这一个div啊,完全没问题啊,这里面一共就这两个第应该说对不对,这两个D啊,这两个,所以说它没有别的啊,大家看到再看一遍。还有别的吗?还有别的孩子吗?没有是吧,我就找他所有的第二位孩子吧,来所有的下面的什么第二位。给他加什么GD呢和是吧,来一个方险,再来一个方险可以吧,在这个里面我们要对哪个元素进行什么样的动种操作啊,对哪些元素我要找到那个元素怎么找呢?它是不是当前发生事件的元素的子元素。
08:13
指div啊对不对,好,那我应该怎么找呢。我要找到我当前发生事件元素的子元素。怎么打?你找东西无非就是原生的多,或者是接块对象,你说你是通过接块的方式去找,还是通过原圈的找?啊,你要原生的去找孩子,你不找死啊?那我们用这块干嘛呢?对不对?J query我们说过了,为什么要叫query,就是查询比较快对不对,查询比较方便,我们现在要讲当前事发生事件元素的是某一个子元素。
09:01
啊,你要想用这块对象的一些查找的一些行为,那你必须先把历史包装成为这块对象。你说我直接用瑞能不能找到我的元素,能肯定是能找到的,但是麻烦了。啊,这个地方大家一定要想到,我要立即将它包装为其快递项,再去调用它查找子元素的方法,什么法是这个方法,找他什么子元素。最后一个元素,或者是它的第二个元素,是不是都一个意思?看到这里。是不是都是一样的规律,最后一个行不行,行没有问题啊,就找他最后一个也行,来其实很多的方式都能找到啊,你想要找到的那个对象。
10:01
可以吧?OK,那接着是不是要去干嘛去是要将它显示啊,啊将它显示。那下面呢?对吧。好,那这样我们就找到了它,来看一下,看看行不行。这是我们work的啊,别搞错了,好走。可不可以可以啊。有可能就是老师,我当时我就想不出来,你不要说你想不出来,你现在我想出来了,你能不能也能也能给他做出来就行。你现在的要求也不太高啊,你先按照我们给大家讲的那种思维去思考,以后看看能不能做出来,你做多了,你再去想,我自己能不能想一想。
11:04
这个地方一定要知道为什么要把this包装为几快递项,因为我现在要去查找当前发生事件元素的什么子元素,我要用原生的找,找起来就可麻烦了。这个记住这样一个事情啊,行,别的也就没有什么了,那我们的第二个要做的事情也就做完了,其实这两个都非常简单,来,现在呢,我把当前这一个给它做一个保存的处理,保存,我这一次呢,不保存在这里了啊,不保留这了,我刚才说过了,应该保存到。我的这一个里面的workspace这个里面记得是这一个,诶放哪来的。Work哦,放在这个里面我知道了啊,不是这个啊,不是这个是这个里面是吧,练习练习四截图是吧?啊这是第二个啊。
12:09
阿联编辑,嗯。好,那接着来,我把这个再提交一下啊,大家现在我提交以后,大家再去做一个更新的操作,就可以来试一下,我们提交一下,嗯,这不是我改编的吗。点一下提交。啊,看到这里他还发现了一个,是不是新增的一个文件是吧?啊OK,好,这一个是实现的是二级菜单来写一个,啊二级菜单的显示隐藏。提交,那提交完了以后呢,大家要做的事情就是去更新一下,看看更新后是不是得到了数据。
我来说两句