在悬停

Question

我想为jstree实例添加功能，以便在每个节点前面显示带有自定义操作的图标，例如创建多节点，删除，节点鼠标悬停的编辑等等，如下图所示：

这是我的代码：

＆＃13;

＆＃13;

$(document).ready(function () {
    $treeview = $('#jstree_demo_div');

    $treeview.on("loaded.jstree", function (event, data) {
        $(this).jstree("open_all");
    });

    $treeview.jstree({
        
        "core": {
            "check_callback": true
        },
        "checkbox": {
            "keep_selected_style": false
        },
        "plugins": ["checkbox", "dnd" , "contextmenu"]
    });


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<div id="jstree_demo_div" style="direction: rtl">
        <ul>
            <li>sport
                <ul>
                    <li><a href="#">football</a></li>
                    <li><a href="#">basketbal</a></li>
                </ul>
            </li>
            <li>learning
                <ul>
                    <li><a href="#">web</a></li>
                    <li><a href="#">html</a></li>
                    <li><a href="#">css</a></li>
                </ul>
            </li>
        </ul>

    </div>

＆＃13;

＆＃13;

＆＃13;

我有什么方法可以添加此功能吗？

Answer 1

由于你没有发布任何代码，我会给你一个想法。我猜你有一个包含所有这些节点的列表。我建议使用display：none。

在这些节点<li>leaf node x-y</li>中添加更多项目

在mouseenter上为<li>绑定事件后，删除display：none以显示您可能需要的显示（显示：block ie）

在这里，我给你一个简单的jsfiddle作为主意。你必须稍微改变它并使用你的图像等。

https://jsfiddle.net/5yduexox/