CSS多级手风琴菜单 - 指针＆amp;图标

Question

https://codyhouse.co/demo/multi-level-accordion-menu/index.html

我使用上面的例子来为移动网站构建我的大型多层次手风琴菜单。

一切顺利但当我缩小菜单项的左边距时，＆＃34;＆gt;＆＃34;指针，打开时转动90％，文件夹的图标嵌入菜单项的文本中。

我希望能够减少指针的左边距并删除文件夹图标。

Page after updating with problem: superimposed pointer and icon

Page before changing the margins and colors

Answer 1

更新

这是一个起点。我不打算为你完成代码。你应该能够从这里找出其余部分。您可以右键单击，检查元素，然后使用CSS，而不是在页面和代码之间来回（这不会保存，所以请记住将其复制到代码中）。

将background: none添加到以下内容中：

删除菜单文件夹：

.cd-accordion-menu input[type=checkbox]:checked + label::after {
    background-position: -32px 0;
    background: none;
}

删除主文件夹：

@media only screen and (min-width: 600px)
style.css:215
.cd-accordion-menu ul label::after, .cd-accordion-menu ul a::after {
    /* left: 65px; */
    background: none;
}

删除标签文件夹：

@media only screen and (min-width: 600px)
style.css:215
.cd-accordion-menu ul label::after, .cd-accordion-menu ul a::after {
    /* left: 65px; */
    background: none;
}

删除标签图标的左侧定位：

@media only screen and (min-width: 600px)
style.css:211
.cd-accordion-menu ul label::before {
    left: 65px;
}

通过从以下CSS中删除padding-left来减少“边距”：

@media only screen and (min-width: 600px)
style.css:206
.cd-accordion-menu ul label, .cd-accordion-menu ul a {
    padding-left: 60px;
}

在以下CSS中将填充从60减少到40：

@media only screen and (min-width: 600px)
style.css:208
.cd-accordion-menu ul label, .cd-accordion-menu ul a {
    padding-left: 40px;
}

以下是它的外观：

Answer 2

V形符号和文件夹分别位于:before和:after伪元素中。他们绝对定位。之前的内部组件有足够的填充，正文文本在图标后开始。您删除了左侧填充，因此不再是这种情况。由于它们不在文档流中，因此不会受到填充更改的影响。

在我看来，你应该构建这样的组件，因为任何级别的自定义都需要几乎同样多的工作来挖掘其他代码，而不保证它写得很好。

如果你想摆脱图标集

   .cd-accordion-menu label::before, 
   .cd-accordion-menu label::after {
      content: none;
   }

您使用的css看起来很敏感，因此请务必测试不同的屏幕尺寸或删除媒体查询。它可能在您的屏幕上看起来很好，但不是每个人都可以。

同样，fyi padding vs margin不是同义词，请确保使用你的意思。如果您不知道，应该阅读box-model