单击html上的展开

Question

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

当一个人点击加号（+）时，它会展开，符号会自动变为减号（ - ），当有人点击减号时，它会折叠并再次变为加号。

这是图片，

Answer 1

我认为您正在寻找树视图。如果它可以使用jquery插件实现这一点

jQuery-Folder-Tree-Plugin

Answer 2

我发现这个jsfiddle很好地实现了你想要的东西。

＆＃13;

＆＃13;

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);
});

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

您可以使用多个Jquery插件来完成此操作。这是一个 - github链接，Z-Tree