javascript - 单击 html 展开

Question

我想在点击时展开/折叠(见下图)。

当有人单击加号 (+) 时，它会展开并且符号本身变为减号 (-)，当有人单击减号时它会折叠并再次变为加号。

这是图片，

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