Question

是jstree的新手。现在我正在使用css和js下面的jstree，它使用32px.png作为节点打开和节点关闭图标。

https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js

有人可以帮助我使用css，它使用大的暗箭头来打开和关闭节点，类似于下面的图片..

Screenshot of jstree with big dark arrow, which i found online

Here is the fiddle, with big dark arrow -

http://jsfiddle.net/wqrmpb01/2/

Answer 1

我希望你看起来像这样

我可以添加以下代码以实现此目的

<!DOCTYPE html>
<html>
<head>
    <title>JSTree</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <style type="text/css">

        .jstree-node .jstree-icon.jstree-ocl {
            background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Angle_right_font_awesome.svg/512px-Angle_right_font_awesome.svg.png');
            background-size: 22px 22px;
            background-position: center !important;
            background-repeat: no-repeat;
            transition: all 0.3s ease;
        }
        .jstree-node.jstree-open .jstree-icon.jstree-ocl {
            transform: rotate(90deg);
        }

    </style>
</head>
<body>
    <h2>
        JSTree
    </h2>
    <div id="jstree_demo_div"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#jstree_demo_div').jstree({
                'core' : {
                    'data' : [
                       'Simple root node',
                       {
                         'text' : 'Root node 2',
                         'state' : {
                           'opened' : true,
                           'selected' : true
                         },
                         'children' : [
                           { 'text' : 'Child 1' },
                           'Child 2'
                         ]
                      }, {
                         'text' : 'Root node 3',
                         'state' : {
                           'opened' : false,
                           'selected' : false
                         },
                         'children' : [
                           { 'text' : 'Child 11' },
                           'Child 22'
                         ]
                      }
                    ]
                },
                "checkbox" : {
                    "keep_selected_style" : false
                },
                "plugins" : [ "wholerow" ]
            });
        })
    </script>
</body>
</html>

在这里，我没有使用font-awesome，而是更改了背景图片。请检查代码并按照您想要的方式进行修改。

由于

需要Jstree css，它使用大的暗箭头来打开和关闭节点，类似于下面的图片

1 个答案: