點擊展開html

Question

我想做點擊展開/摺疊（見下圖）。

當一個人點擊加號（+）時，它會展開並且符號會自動變爲減號（ - ）符號，並且當某個人單擊減號時將其簽名並再次變爲加號。

這裏是圖片，

Answer 1

我認爲你正在尋找樹視圖。如果你能做到這一點使用jQuery插件

jQuery-Folder-Tree-Plugin

Answer 2

我發現這個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" />

Answer 3

您的圖片說，你要像JSON樹。

你可以通過使用幾個Jquery插件來做到這一點。這裏是一個 - github鏈接，Z-Tree