1

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

似乎当我将 .collapse 类添加到 a<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 类对嵌套列表进行任何引用，我不确定我是否以错误的方式处理事情。

4

1 回答 1

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

于 2013-06-23T13:59:06.060 回答