始終打開有時候可能會很管用，其實就是一個設置問題。這里就不再介紹引用的資源了，這里只看看html是怎么寫的。
1.html代碼
<body> <h2>Basic Accordion</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>Click on panel header to show its content.</div> </div> <div style="margin:10px 0;"></div> <div class="easyui-accordion" style="width:500px;height:300px;"> <div title="Top Panel" data-options="iconCls:'icon-search',collapsed:false,collapsible:false" style="padding:10px;"> <input class="easyui-searchbox" prompt="Enter something here" style="width:300px;height:25px;"> </div> <div title="About" data-options="selected:true" style="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="Title1" style="padding:10px"> <p>Content1</p> </div> <div title="Title2" style="padding:10px"> <p>Content2</p> </div> </div> </body>
data-options="iconCls:'icon-search',collapsed:false,collapsible:false"
這個屬性設置就是當前狀態是關閉false，當前可展開性為false。下面是效果圖
可以看到第一個格子始終是展開的沒有右邊那個展開的圖標“《”。
2.前面我們看到的手風琴都是始終只有一個可以展開的格子，開可以設置有多個展開的格子。這里看看html代碼是怎么寫的
<div class="easyui-accordion" data-options="multiple:true" style="width:500px;"> <div title="Language" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;"> <p>A programming language is a formal language designed to communicate instructions to a machine, particularly a computer. Programming languages can be used to create programs that control the behavior of a machine and/or to express algorithms precisely.</p> </div> <div title="Java" style="padding:10px"> <p>Java (Indonesian: Jawa) is an island of Indonesia. With a population of 135 million (excluding the 3.6 million on the island of Madura which is administered as part of the provinces of Java), Java is the world's most populous island, and one of the most densely populated places in the world.</p> </div> <div title="C#" style="padding:10px;"> <p>C# is a multi-paradigm programming language encompassing strong typing, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.</p> </div> <div title="Ruby" style="padding:10px"> <p>A dynamic, reflective, general-purpose object-oriented programming language.</p> </div> <div title="Fortran" stylep="padding:10px"> <p>Fortran (previously FORTRAN) is a general-purpose, imperative programming language that is especially suited to numeric computation and scientific computing.</p> </div> </div>
這里起作用的就一句，data-options="multiple:true"這個就是讓手風琴可以多個展開的效果。如下圖