我有一个 Accordion 菜单,我相信它使用一个复选框来激活和停用展开,它使用下面的 css 根据它是否展开来转换箭头。
.expand input + *::before {
content: '»';
color: #ffffff;
font-size: 25px;
padding-right: 18px;
padding-top: 0;
float: left;
transition: all 0.2s;
margin-top: -5px;
}
.expand input:checked + *::before {
transform: rotate(90deg);
padding-right: 15px;
padding-top: 15px;
}
我遇到的问题是我在 <li>
中使用复选框 Accordion 中的元素,不希望将上述样式应用于这些复选框。
不过我似乎找不到解决这个问题的方法。
编辑** 我意识到我用这种方式过于复杂了,我已经删除了扩展的列表项并使用了 react bootstrap Accordion ,它在没有使用复选框的情况下扩展。
最佳答案
你可以通过给它一个像 input.checkbox-hack:checked 这样的类来命名复选框
关于css - Accordion input::before 伪元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34719597/