将图片标签放入 html 可扩展树

Question

我正在将 XML 树转换为可扩展的 HTML 树。代码正在运行。但是，我想把-和+标志替换成JPEG图片，比如

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

我试图将 link 作为 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 可扩展树

putting an image tag into html expandable tree

html

xml

tree

jquery

image