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

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

1 个答案: