jQuery EasyUIチュートリアルを使用した折り畳み可能パネルの作成

>
このチュートリアルでは、easyui折りたたみパネルについて学習します.折りたたみパネルには、すべてのパネルタイトルが表示されますが、1つのパネルの本体コンテンツだけが表示されます.ユーザーがパネルタイトルをクリックすると、そのパネルの本体内容が表示され、他のパネルの内容が非表示になります.
プレゼンテーションの表示
3つのパネルを作成します.3つ目のパネルにはツリーメニューが含まれています.< div class = "easyui-accordion" style = "width:300px;height:200px;" > < div title = "About Accordion" iconcls = "icon-ok" style = "overflow:auto;padding:10px;" > < h3 style = "color:#0099FF;" >Accordion for jQuery h3 > < p >Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily. p > div >

< div title = "About easyui" iconcls = "icon-reload" selected = "true" style = "padding:10px;" > easyui help you build your web page easily div >

< div title = "Tree Menu" > < ul id = "tt1" class = "easyui-tree" > < li > < span >Folder1 span > < ul > < li > < span >Sub Folder 1 span > < ul > < li >< span >File 11 span > li > < li >< span >File 12 span > li > < li >< span >File 13 span > li > ul >

li >

< li >< span >File 2 span > li > < li >< span >File 3 span > li > ul >

li >

< li >< span >File2 span > li > ul >

div >

div > EasyUI ：easyui-accordion-demo.zip

jQuery EasyUI ！