点击展开html答案

【问题标题】：Click expand on html点击展开html
【发布时间】：2017-11-06 23:42:36
【问题描述】：

我想在点击时展开/折叠（见下图）。

当一个人单击加号 (+) 时，它会展开并且符号会自行变为减号 (-)，当一个人单击减号时，它会折叠并再次变为加号。

这是图片，

【问题讨论】：

新手与否，您需要展示您尝试过的内容以及遇到的问题。不只是有人帮我做这项工作！问问自己，你认为它是如何工作的？有人点击，然后打开，再次点击它关闭。内容是在点击时添加的，还是从一开始就已经存在？等等。先解决它。
@javaBean007 我不是要求有人为我编写完整的代码。我只想要它的名字，然后我就可以开始自己学习了！
我支持@Maz341，至少我通过他的帖子找到了答案。这里是提问和学习的地方。如果您有时间指责某人并争论该做什么不该做什么，为什么不留下您的答案？不要只是投反对票而没有留下任何东西。

标签： javascript jquery html css

【解决方案1】：

我发现这个 jsfiddle 很好地实现了你正在寻找的东西。

var data = [{
    "id": "1",
    "name": "Corporate Headquarters",
    "budget": "1230000",
    "location": "Las Vegas",
        "children": [{
        "id": "2",
        "name": "Finance Division",
        "budget": "423000",
        "location": "San Antonio",
            "children": [{
            "id": "3",
            "name": "Accounting Department",
            "budget": "113000",
            "location": "San Antonio"
        }, {
            "id": "4",
            "name": "Investment Department",
            "budget": "310000",
            "location": "San Antonio",
            children: [{
                "id": "5",
                "name": "Banking Office",
                "budget": "240000",
                "location": "San Antonio"
            }, {
                "id": "6",
                "name": "Bonds Office",
                "budget": "70000",
                "location": "San Antonio"
            }, ]
        }]
    }, {
        "id": "7",
        "name": "Operations Division",
        "budget": "600000",
        "location": "Miami",
            "children": [{
            "id": "8",
            "name": "Manufacturing Department",
            "budget": "300000",
            "location": "Miami"
        }, {
            "id": "9",
            "name": "Public Relations Department",
            "budget": "200000",
            "location": "Miami"
        }, {
            "id": "10",
            "name": "Sales Department",
            "budget": "100000",
            "location": "Miami"
        }]
    }, {
        "id": "11",
        "name": "Research Division",
        "budget": "200000",
        "location": "Boston"
    }]
}];

var source = {
    dataType: "json",
    dataFields: [{
        name: "name",
        type: "string"
    }, {
        name: "budget",
        type: "number"
    }, {
        name: "id",
        type: "number"
    }, {
        name: "children",
        type: "array"
    }, {
        name: "location",
        type: "string"
    }],
    hierarchy: {
        root: "children"
    },
    localData: data,
    id: "id"
};

var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function () {

    }
});
// create jqxTreeGrid.
$("#treeGrid").jqxTreeGrid({
    source: dataAdapter,
    altRows: true,
    width: 680,
    theme:'energyblue',
    checkboxes: true,
    ready: function () {
        $("#treeGrid").jqxTreeGrid('expandRow', '1');
        $("#treeGrid").jqxTreeGrid('expandRow', '2');
    },
    columns: [{
        text: "Name",
        align: "center",
        dataField: "name",
        width: 300
    }, {
        text: "Budget",
        cellsAlign: "center",
        align: "center",
        dataField: "budget",
        cellsFormat: "c2",
        width: 250
    }, {
        text: "Location",
        dataField: "location",
        cellsAlign: "center",
        align: "center"
    }]
});
$("#jqxbutton").jqxButton({
    theme: 'energyblue',
    height: 30
});
$('#jqxbutton').click(function () {
    $("#treeGrid").jqxTreeGrid('checkRow',2);
});

<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

<div id="treeGrid"></div>
<input type="button" style="margin: 20px;" id="jqxbutton" value="Check a row" />

【讨论】：

【解决方案2】：

我认为您正在寻找树视图。如果是的话，你可以使用 jquery 插件来实现这一点

jQuery-Folder-Tree-Plugin

【讨论】：

【解决方案3】：

你的图片说你想要像 JSON 树这样的东西。

您可以通过使用几个 Jquery 插件来做到这一点。这是一个 - github 链接，Z-Tree

【讨论】：