在可扩展列表上使用fontaawesome

Using FontAwesome on Expandable List

本文关键字：fontaawesome 可扩展 列表      更新时间：2023-09-26

我现在正在做一个小列表，我想使用字体Awesome右胡萝卜来表明文本是可扩展的。我可以把字体awesome放在任何li项下没有ul。但如果我尝试将其添加到项目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'});
});

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

这些行:

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

和

.children().hide();

隐藏了li的childrens即i和ul。所以只要改变你的javascript只隐藏li的ul的孩子，而不是隐藏所有的孩子。

更新JS: 

$(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('ul').toggle('slow'); //Changed
        }
        return false;
    })
        .css({
        cursor: 'pointer',
            'list-style-image': 'url(plusbox.gif)'
    })
        .children('ul').hide(); //Changed
    $('li:not(:has(ul))').css({
        cursor: 'default',
            'list-style-image': 'none'
    });
});
演示:

http://jsfiddle.net/lotusgodkk/JfGVE/157/

相关文章：