下载掌阅APP，畅读海量书库
立即打开
1.27 实现可折叠效果
同一个页面有多组不同的内容，每组包含数量不定的div层，这时可以按照组别来单独折叠或展开内容。这类效果的实现原理其实很简单，折叠时隐藏该组中所有元素内容，展开时再将其隐藏属性设置为显示。针对该效果比较成功的实现是jQuery UI的Accordion控件，其效果如图1.40、图1.41和图1.42所示。
图1.40 展开“first”层时的效果
图1.41 展开“second”层时的效果
图1.42 展开“third”层时的效果
本例主要代码如下：
本例的关键代码是第05行，其中siblings()函数获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的，其语法如下：
其中参数selector为可选项、字符串值，表示包含用于匹配元素的选择器表达式。
设计人员使用siblings()函数时需要注意以下两点：
● 如果给定一个表示DOM元素集合的jQuery对象，siblings()函数允许用户在DOM树中搜索这些元素的同胞元素，并用匹配元素构造一个新的jQuery对象。
● siblings()函数接受可选的选择器表达式，与jQuery框架的$()函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器来筛选元素。