老师有问题

老师这里没有设置js，class active在html中也没有设置，它是那里冒出来的

.dropdown-active .dropdown-toggle,这句话有什么用，hove后css不就发生改变了吗。不明白看了两遍

早知今日何必当初 2020-03-04

源自：实战：站点导航组件化 3-5 让菜单下拉

收起

3回答

好帮手慕星星回答被采纳获得+3积分 2020-03-05 17:59:13

同学你好，解答如下：

1、.dropdown-active是直接出现在css中，没有设置class ，但是js中设置了class啊：

当设置了dropdown-active值的时候，样式才会生效，不设置就不生效。

2、凡是有.dropdown-active类名的样式，默认情况下是没有效果的，因为html中并没有添加相关的class名。但是如果动画中使用js方式，通过添加class来实现效果，那么有.dropdown-active类名的样式就会生效。

3、代码中做了双重保险，js不添加生效的话，hover也会生效的，如果觉得多余的话，自己测试的时候也可以去掉。

祝学习愉快！

收起回答

提问者早知今日何必当初 2020-03-05 15:22:09

1、css中是提前添加的，元素中有dropdown-active类名的时候，设置的样式就生效了。可以参考另外一个提问的问题：

css没有加，html也没有

收起回答

提问者早知今日何必当初 #1

.nav-site{ width: 100%; background-color: #f3f5f7; } .nav-site .container{ height: 44px; line-height: 44px; border-bottom: 1px solid #cdd0d4; } .nav-site-login{ color: #f01414; } .nav-site-signup, .nav-site-moblie{ margin-left: 10px; } .nav-site-category{ margin: 10px; } .nav-size-service{ margin-right: 15px; } /*dropdown*/ .dropdown{ position: relative; } .dropdown-toggle{ display: block; height: 100%; padding: 0 16px 0 12px; border-left:1px solid #f3f5f7 ; border-right:1px solid #f3f5f7 ; position: relative; z-index: 2; } .dropdown-arrow{ display: inline-block; width: 8px; height: 8px; background: url(../img/dropdown-arrow.png) no-repeat; margin-left: 8px; vertical-align: middle; } .dropdown-layer{ display: none; position: absolute; top: 43px; z-index: 1; background-color: #fff; border: 1px solid #cdd0d4; } .dropdown-left{ left: 0; right: auto; } .dropdown-right{ left: auto; right: 0; } .dropdown-item{ height: 30px; line-height: 30px; display: block; color: #4d555d; white-space: nowrap; padding: 0 12px; } .dropdown-item:hover{ background-color: #f3f5f7; } .dropdown-active .dropdown-toggle, .dropdown:hover .dropdown-toggle{ background-color:#fff; border-color:#cdd0d4; } .dropdown-active .dropdown-arrow, .dropdown:hover .dropdown-arrow{ background-image:url(../img/dropdown-arrow-active.png); } .dropdown-active .dropdown-layer, .dropdown:hover .dropdown-layer{ display:block; }

2020-03-05 15:22:35
提问者早知今日何必当初 #2

.dropdown-active是直接出现在css中，没有设置class ，.dropdown-active .dropdown-layer, 这句话没有任何意义，下面的.dropdown:hover .dropdown-layer就可以实现了，上个问题也是我问的。互相矛盾老师，最后一节课最后一节 .dropdown-active .dropdown-layer, 有什么用

2020-03-05 15:25:39