Question

我正在将XML树转换为可扩展的HTML树。代码正在运行。但是，我想用JPEG图像替换-和+符号，例如

http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif

我正在尝试将链接作为href放在<b>-</b>的位置，但它不起作用。通常我会使用

的风格

background: transparent url(http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif) no-repeat top left;

但它不会在这里工作。我该怎么办？谢谢这是工作代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    url: "cd_catalog2.xml",
                    success: function (tree) {
                        traverse($('#treeView li'), tree.firstChild)
                        // this – is an &mdash;
                        $('<b>–<\/b>').prependTo('#treeView li:has(li)').click(function () {
                            var sign = $(this).text()
                            if (sign == "–")
                                $(this).text('+').next().children().hide()
                            else
                                $(this).text('–').next().children().show()
                        })
                    }
                })
            });
            function traverse(node, tree) {
                var children = $(tree).children()
                node.append(tree.nodeName)
                if (children.length) {
                    var ul = $("<ul>").appendTo(node)
                    children.each(function () {
                        var li = $('<li>').appendTo(ul)
                        traverse(li, this)
                    })
                } else {
                    $('<ul><li>' + $(tree).text() + '<\/li><\/ul>').appendTo(node)
                }
            }
        </script>
        <style type="text/css">
            #treeView li{list-style: none;}
            #treeView ul { padding-left: 1em; }
            #treeView b { padding-right: 1em; }
        </style>
        <title>treeView</title>
    </head>
    <body>
        <ul id="treeView">
            <li></li>
        </ul>
    </body>
</html>

Answer 1

尝试以下代码。我没有从文件中获取列表，只是一个静态的例子。

$('#treeView li:has(li)').addClass("Max").click(function (e) {
   $(this).toggleClass("Max Min")
   $(this).children().toggle()
    e.stopPropagation();
})

Css

.Min{
    background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
    padding-left : 20px;
}
.Max{
    background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat ;
    padding-left : 20px;
}

以下是类似的示例jsfiddle

<强> [编辑]

更新了符合您要求的脚本。

$(document).ready(function () {
            $.ajax({
                url: "cd_catalog.xml",
                success: function (tree) {
                    traverse($('#treeView li'), tree.firstChild)
                    $('#treeView li:has(li)').click(function (e) {
                        var cls = this.className.replace("Max","").replace("Min","")
                        $(this).toggleClass(cls+"Max "+cls+"Min")
                       $(this).children().toggle()
                        e.stopPropagation();
                    })
                }
            })
        });


        function traverse(node, tree) {
            var children = $(tree).children()
            node.addClass(tree.nodeName+"Max")
            node.append(tree.nodeName)
            if (children.length) {
                var ul = $("<ul>").appendTo(node)
                children.each(function () {
                    var li = $('<li>').appendTo(ul)
                    traverse(li, this)
                })
            } else {
                $('<ul><li>' + $(tree).text() + '<\/li><\/ul>').appendTo(node)
            }
        }

少数标签的Css

.CDMin{
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
            padding-left : 20px;
        }
        .CDMax{
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat ;
            padding-left : 20px;
        }
        .CATALOGMin{
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
            padding-left : 20px;
        }
        .CATALOGMax{
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat ;
            padding-left : 20px;
        }
        .ARTISTMin{
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
            padding-left : 20px;
        }
        .ARTISTMax{
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat ;
            padding-left : 20px;
        }

我希望这会有所帮助

没有ajax jsfiddle

的示例示例

将图像标记放入html可扩展树中

1 个答案: