css - 汉堡菜单不适用于样式化组件
问题描述
我真的很困惑为什么它不起作用。我正在使用 styled-components 库,实际上我遇到了汉堡菜单的问题。它仅在显示复选框时更改。它应该只适用于 css,但它没有任何建议?
const HamburgerCnt = styled.div`
cursor: pointer;
position: absolute;
top: 35px;
right: 41px;
height: 28px;
width: 30px;
input {
display: none;
}
input + label {
position: absolute;
top: 12px;
right: 0px;
width: 30px;
height: 2px;
background: #fff;
display: block;
transform-origin: center;
transition: .5s ease-in-out;
&:after,
&:before {
transition: .5s ease-in-out;
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #fff;
}
&:before {
top: -10px;
}
&:after {
bottom: -10px;
}
}
input:checked + label {
transform: rotate(45deg);
&:after {
transform: rotate(90deg);
bottom: 0;
}
&:before {
transform: rotate(90deg);
top: 0;
}
}
`;
和组件看起来像这样
<HamburgerCnt>
<input type="checkbox" name="check" />
<label htmlFor="check" />
</HamburgerCnt>
解决方案
您应该使用check
as 作为id
输入,而不是它的名称。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Using_the_for_attribute
推荐阅读
- python - 内部 virtualenv 中的 subprocess.call 离开 Windows 上的虚拟环境
- php-7.3 - 当我将 mysqli_fetch_assoc($query) 放入 while 循环以从数据库中检索数据时,循环将无限迭代。为什么会这样
- javascript - 更改功能后,Sinon 测试失败
- angular - 我正在尝试实现 ngx-bootstrap datepicker
- javascript - 如何在 React-native 中更改整个应用程序的主题?
- java - Java - 如果要发送的文件不是普通文本文件,则通过套接字发送的文件为空
- c# - 一键从两种方法调用两个插入表查询的一个存储过程
- java - 如何让数组打印用户输入、存储小计、乘以税款和总计
- reactjs - React Native FAILURE:构建失败,出现异常 ative_modules.gradle' 行:191
- javascript - 复制 jquery-ajax - 为什么是 403?[CORS]