使用来自 font-awesome 的列表图标折叠列表

Question

我正在尝试使用 Bootstrap/jQuery 和 fontawesome 折叠无序列表的一部分。现在我正在嵌套列表，我认为这在语义上是有效的。

似乎当我将 .collapse 类添加到 <ul> 时，我设置为项目符号的图标消失了。我做错了什么，或者这可能是 fontawesome/Bootstrap 之间的一些奇怪的冲突？

这是代码，这里是jsfiddle 说明问题：

<ul class="icons-ul">
    <li><i class="icon-li icon-cog"></i><a href="#">List item</a></li>
    <li><i class="icon-li icon-chevron-down"></i><a href="#list-more" class="accordion-toggle" data-toggle="collapse" data-target="#list-more">More</a>
        <ul id="list-more" class="icons-ul collapse">
            <li><i class="icon-li icon-cog"></i><a href="#">Item 1</a></li>
            <li><i class="icon-li icon-cog"></i><a href=#"">Item 2</a></li>
        </ul>
    </li>
</ul>

我已准备好使用 font-awesome 提交错误报告，但由于文档没有使用 .icons-ul 类对嵌套列表进行任何引用，我不确定我是否会做错事方式。

Answer 1

Bootstrap 的 .collpase 和 FontAwesome 的 .icons-ul 似乎不能很好地结合在一起。 需要进一步检查，但问题似乎是 bootstrap 的 .collapse 如何使用 overflow: hidden，而 fontawesome 的 .icon-li 使用 position: absolute; left: -2.142857142857143em;，这意味着图标的可见性将被切断。

无论如何，我相信这是对您的代码的修改，可以完成手头的任务。

http://jsbin.com/ifequd/1/edit

请注意，在 html 中，我更改了源代码，以便图标位于 <a> 标记内；从可用性的角度来看，我疯了，因为我无法单击图标来触发菜单。

HTML

<ul class="icons-ul">
    <li><a href="#"><i class="icon-li icon-cog"></i>List item</a></li>
    <li><a href="#list-more" class="accordion-toggle" data-toggle="collapse" data-target="#list-more"><i class="icon-li icon-chevron-down"></i>More</a>
        <ul id="list-more" class="icons-ul collapse">
            <li><a href="#"><i class="icon-li icon-cog"></i>Item 1</a></li>
            <li><a href="#"><i class="icon-li icon-cog"></i>Item 2</a></li>
        </ul>
    </li>
</ul>

CSS

ul.collapse {
  left: -2.142857142857143em;
}
.collapse li {
  left: 2.142857142857143em;
}

a i {
  color: #333;  
}

a:hover i {
  text-decoration: none;  
} 

或者，您可以不使用 .icon-li 类。
http://jsbin.com/ofeziq/1/edit