Question

我正在制作一个小清单，我想使用Font Awesome右胡萝卜来表明该文本是可扩展的。我可以把字体真棒放在任何没有ul的li项目下面。但如果我尝试将其添加到第3项，则图标不会显示。然而它出现在第1项中。下面是代码，简单的小清单，它将显示在项目1中使用的FA，但完全相同的代码在第3项中，但它不会显示出来。

<tr><td class="tcat"><strong>Categories</strong></td>{$inlinemodcol}</tr>
<tr>

<td class="trow1" colspan="2">
     <ul>
        <li><i class="fa icon-caret-right"></i>Item 1</li>
        <li>Item 2</li>
        <li><i class="fa icon-caret-right"></i>Item 3
            <ul>
                <li>Item 3.1</li>
                <li>Item 3.2</li>
                <li>Item 3.3</li>
            </ul>
        </li>
        <li>Item 4
            <ul>
                <li>Item 4.1</li>
                <li>Item 4.2</li>   
            </ul>
        </li>
        <li>Item 5</li>
    </ul>

这个小菜单用于扩展菜单的Javascript：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
    $('li')
        .css('pointer','default')
        .css('list-style-image','none');
    $('li:has(ul)')
        .click(function(event){
            if (this == event.target) {
                $(this).css('list-style-image',
                    (!$(this).children().is(':hidden')) ? 'url(plusbox.gif)' : 'url(minusbox.gif)');
                $(this).children().toggle('slow');
            }
            return false;
        })
        .css({cursor:'pointer', 'list-style-image':'url(plusbox.gif)'})
        .children().hide();
    $('li:not(:has(ul))').css({cursor:'default', 'list-style-image':'none'});
});

Answer 1

我认为这是因为你使用的是javascript代码。

这些行：

$(this).children().toggle('slow');

和

.children().hide();

正在隐藏childrens的{{1}}，即li和i。因此，只需更改您的javascript即可隐藏ul ul个孩子，而不是隐藏所有孩子。

更新了JS：

li

演示： http://jsfiddle.net/lotusgodkk/JfGVE/157/

在可扩展列表上使用FontAwesome

1 个答案: