00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成通过JS去控制着二三级商品分类的显示与隐藏的业务。那咱们呢,先看一下呢,咱们正在开发的这个项目。那么当老师把鼠标放到这个一级分类当中,比如说手机。那么手机右侧的二三级分类呢,也会进行相应的展示。那么如果啊老师呢,把鼠标放到厨具这里,那右侧呢,也会进行展示相应厨具的二三级分类。那首先说啊,咱们的目前为止啊,已经有这样的一个效果。对吧,但是呢,这里要注意一件事,咱们先看一下代码,他现在的这种效果是通过什么样的一个业务去完成的。
01:01
那咱们呢,去找到咱们的三级联动这里type nv。那咱们呢,把这块呢,老师呢,给你打开咱们看一下子。那首先说啊,这里呢,是商品分类,也就是这里。对吧,那么底下这里呢,是什么呢?是咱们的这个三级联动,写一下三级联动。那以及呢,咱们呢,再往底下看一下,这儿给它打开。那这里啊,是属于咱们的一级分类啊,当然咱们呢,看的并不是一级分类,要看它的二级和三级分类,这里是如何进行显示与隐藏的。那咱们呢,接下来继续去找一下。那这里呢,也是属于一级分类,这不C1嘛,那这里啊叫做什么呢?就是二级还有三级分类的地方,对吧,做一下笔记三级分类。虽然说啊,现在呢,二三级分类的显示与隐藏啊,其实通过的是类名啊,通过样式去完成的。
02:06
对吧,比如说鼠标没有移上去之前,那所有的二三级分类是类为。那当你鼠标一上去,比如说以上数码,那右侧的二三级分类呢,它呢是通过样式第4PLAY为block实现的。咱们呢,可以看一下。就比如说二三级分类最外层的这个容器。它的类名呢,叫做什么呢?叫做item class。对吧,啊,叫做item list。以及呢,还有个类名叫做clear,那咱们呢,去找一下底下相应的样式,那咱们可以看一下。对吧,找一下。那就比如说在这儿吧,你看起始的二三级分类,它的item list,你看它是怎么做的,是斯普类维纳。那么当鼠标移上去之后。
03:00
对吧,那你会发现咱们的二三级商品分类。它呢,又变为display为blog。那当然,那咱们也去做一下笔记。比如说最开始的时候,那么是通过CSS样式。对吧,第四为block或者是no。显示与。隐藏咱们的二三级啊,这个商品分类。那咱们呢,不想采用什么呢?不想采用样式的这种形式。那所以说啊老师呢,就把鼠标一上这个事件啊,我给他注释掉,给他干掉。对吧,那这回呢,咱们再回首看一下子,你鼠标一上,那就没有任何的效果了。那接下来呢,咱们就是通过GS去给他完成。那比如说手机啊,我移到手机上,那么手机右侧的相应的二三级分类应该展示出来。
04:07
那以及假如说老师呢,移到钟表上,那右侧的二三级分类呢,你得展示,那也就是说谁有背景颜色,谁右侧应该有二三级分类。那这里呢,其实呢就很好办了,看这。那也就是说咱们二三级分类这里啊,它呢,应该是有一个动态的一个样式,那咱们给他来一个叫做带。当然啊,它呢是要显示或者是隐藏,那咱们呢,给它来一个叫做的斯。那么什么时候显示呢?那也就是说只要谁有类名对吧,那谁就应该显示,那也就是说判断的条件呢,应该是咱们的curt current index。如果等于当前的这个索引值,就是说白了你鼠标放上放上去谁。
05:00
对吧,那么应该怎么的,应该是显示的,那咱就给他来个block,那其余的呢,应该给的是怎么的,是隐藏的。所以说你会发现鼠标仪上哪一个一级分类,OK,它有这个类名。对吧,加上个背景颜色,那以及鼠标以上谁谁的右侧才有这个二三级分类。对吧,那所以说呢,咱们呢,最终采用的是GS去完成,而不用这种CSS样式。当然有的同学可能会说呀,那老师那我就采用CSS样式可不可以啊,当然可以,当然咱们这里面呢,需要去更多的去练习关于GS的东西。那所以说啊,这是咱们的一个二三级商品分类的一个展示,当然一级分类这个索引制咱们是不需要的,那最后呢,老师呢,也给他干掉。好吧,所以说这是咱们讲了一下子二三级商品分类的,通过GS动态去控制着显示与隐藏的业务。
我来说两句