今天在写网页时，遇到了一个下拉按钮控制下拉框的的样式，原本一个挺简单的样式，因为自己的粗心和许久没有用过js控制css样式，导致困扰了自己许久，还好在老师的帮助下解决了这个问题，写个帖子记录一下，先放最后的效果图：
下面就是代码实现：
先是html代码：
-
所有 Microsoft
软件
- Windows 应用
- OneDrive
- Outlook
- Skype
- OneNote
- Microsoft Teams
- 购买Xbox
- PC和平板电脑
- 配件
- Xbox与游戏
- PC游戏
- Microsoft Cloud
- Microsoft安全
- Azure
- Dynamics 365
- Microsoft 365 商业版
- Microsoft 行业
- Microsoft Power Platform
- Windows 365
- 开发人员中心
- 文档
- Microsoft Learn
- Microsoft 技术社区
- Azure 市场
- AppSource
- Visual Studio
- 免费下载与安全性
- 教育
- 搜索
- 购物车
- 正汉
这里给的是导航栏右边的样式，
下面是css代码：
.dropbtn {
padding-left: 3px;
}
.dropitem {
position: relative;
float: left;
height: 48px;
padding: 10px;
}
#dropdown-content {
position: absolute;
height: 480px;
width: 1200px;
background-color: #F2F2F2;
border: 1px solid #E6E6E6;
border-bottom: 2px solid black;
top: 40px;
left: -800px;
padding: 20px;
z-index: 99;
}
.columns {
float: left;
padding-left: 75px;
}
.dropitem>.columns li>a:hover {
border-bottom: 1px solid #262626;
}
.columns ul>li {
padding-top: 26px;
}
.bottem-drop {
width: 100%;
height: 40px;
background-color: #E6E6E6;
text-align: center;
position: absolute;
bottom: 0px;
line-height: 40px;
margin-left: -20px;
}
.bottem-drop>a:hover {
text-decoration: underline;
}
最后是最重要的js代码，其实上面的css和html对着官网慢慢凹都差不多能凹出来，主要是js部分我们来详细看一看：
let content = document.getElementById("dropdown-content");
let dropitem = document.getElementsByClassName("dropitem")[0];
function getdropdown(e) {
console.log(content);
if (content.style.display == "none") {
content.style.display = "block"
dropitem.style.backgroundColor = "#F2F2F2"
} else {
content.style.display = "none"
dropitem.style.backgroundColor = "white"
}
}
首先我们是通过直接改变样式的方式，将下拉框的display修改，我在这里犯了两个错误，第一个就是content.style.display，起初我以为这个代码可以直接修改class的样式，这是错误的，这是错误的！这是错误的！！content.style.display只可以修改内联样式的值！console.log(content);可以查看到获取的值，发现只有内联样式的style修改了，
而第二个错误就有些低级，我将赋值的=与判断的==弄混了，这是一个低级的错误，希望大家引以为戒。
