站点导航组件化 实战站点导航组件化（步骤三）
我不懂这个css实现的时候 是没有active这个类的 为什么这样写
还有这里也是 用js添加类的方法来做显示影藏什么的 主要是没有active这个类 为什么还可以 .updown-arrow什么的
正在回答
同学你好，问题解答如下：
1、.dropdown-active这个类一开始确实是没有的，但是后面添加上才会生效.。.dropdown-active .dropdowntoggle 这样写是后代元素的选择，只是说添加上了active之后，dropdowntoggle相关的样式才会生效。可以理解为准备样式（提前设置样式）。
2、使用addClass方法添加类名的时候是不需要加点的，如下修改
效果：
自己再测试下，祝学习愉快！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单组件</title>
<link rel="stylesheet" href="../css/base.css" />
<style type="text/css">
.dropdown {
position: relative;
}
.dropdown-toggle {
position: relative;
z-index: 2;
}
.dropdown-arrow {
display: inline-block;
background-repeat: no-repeat;
vertical-align: middle;
}
.dropdown-layer {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-left {
left: 0;
right: auto;
}
.dropdown-right {
right: 0;
left: auto;
}
/*.menu .dropdown*/
.menu .dropdown-toggle {
display: block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.menu .dropdown-arrow {
width: 8px;
height: 6px;
background-image: url(../img/dropdown-arrow.png);
margin-left: 8px;
}
.menu .dropdown-layer {
top: 100%;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.menu-item {
display: block;
height: 30px;
line-height: 30px;
padding: 0 12px;
color: #4d555d;
white-space: nowrap;
}
.menu-item:hover {
background-color: #f3f5f7;
}
.dropdown-active .dropdown-toggle {
background-color: #fff;
border-color: #cdd0d4;
}
.dropdown-active .dropdown-arrow {
background-image: url(../img/dropdown-arrow-active.png);
}
.dropdown-active .dropdown-layer {
display: block;
}
</style>
</head>
<body>
<!-- 通用html代码
<div class="menu dropdown">
<div class="dropdown-toggle">我的慕淘<i class="dropdown-arrow"></i></a>
<div class="dropdown-layer dropdown-left">
</div>
</div> -->
<div class="menu dropdown">
<a class="dropdown-toggle">我的慕淘<i class="dropdown-arrow"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</div>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').hover(function() {
$(this).addClass('.dropdown-active');
}, function() {
$(this).removeClass('.dropdown-active ');
});
</script>
</body>
</html>
老师麻烦看看这个 这个dropdown-active 这个类为什么又没有效果了
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星