jQuery CSS半开折叠效果原理及代码（自写)

一个项目想用jQuery做一个可以半折叠的差异元素，苦于jQueryUI中手风琴没有提供相关的方法，就自己写了个。以前使用jQueryUI的时候发现能够用的手风琴全部折叠起来了，没办法设置折叠的最小高度。代码质量很低，希望老鸟能够指点指点。下图是效果展示，能够借由jQuery的函数展开收缩

复制代码代码如下：//作者： hlhr//需要： jquery 1.4及以上函数animate_toggle_height(maxh，minh，maxo，mino，element，speed) {//这个是纵向的，参数解释：最大高度，最小高度，最大透明度，最小透明度，元素，动画速度if(元素。CSS('高度')==Minh。tostring().concat(' px '){//如果是最小高度就展开元素。animate({ height : max h，opa city 3360 max o }，{queue: false}，speed)；返回Fold ' } if(元素。CSS(' height ')==maxh。tostring().concat(' px '){//如果是最大高度就折叠$(这个)。html(" ")；元素。animate({ height : Minh，opacity:mino }，{queue: false}，speed)；返回"阅读更多";} }函数animate_toggle_width(maxw，minw，maxo，mino，element，speed){ if(element。CSS(' width ')==minw。tostring().concat(' px '){ element。animate({ width : max w，opa city 3360 max o }，{queue: false}，speed)；返回Fold ' } if(元素。CSS(' width ')==maxw。tostring().concat(' px '){ element。animate({ width : minw，opacity:mino }，{queue: false}，speed)；返回"阅读更多";} } 复制代码代码如下： html头脚本src=' http : jquery-1。9 .1 .量滴js /脚本！-需要jquery库-script src=' http : jqslider。js '/脚本！-链接上文的射流研究…库-样式车身{ margin: 0 auto文本对齐：居中；} .幻灯片{ font-size :20 px飞越：隐藏；宽度： 500像素；} #内容{ margin:0 auto宽度： 500像素；} .查看按钮{位置：相对；文本对齐：右侧；}/style/head body字段集id=' content ' div class=' slide ' a class=' view button ' href=' # '详细阅读/a pslide！/p pslide！/p pslide！/p pslide！/p pslide！/p/div/字段集p/字段集id=' content ' div class=' slide ' a class=' view button ' href=' # '阅读更多/a pslide！/p pslide！/p pslide！/p pslide！/p pslide！/p /div /fieldset脚本类型=' text/JavaScript ' var max _ h=300；var min _ h=100//var max _ w=500；//var min _ w=10；var max _ o=1；var min _ o=0.3$('。幻灯片')。CSS({ opa city 3360min _ o })；//设置初始的透明度$('.幻灯片')。CSS({ height :min _ h })；//设置初始的高度$('.查看按钮').单击(函数(){//这里只是调用了纵向展开，也可以调用横向展开$(这个)。html(animate _ toggle _ height(max _ h，min_h，max_o，min_o，$(this)).parent()，500))；//自动识别为视图按钮的上一级进行动画});/script /body /html viewbutton的层级可自行修改，但要注意动画的目标是什么。我写的视图按钮会对它上一级的那个差异做动画，所以就不用把选择器写得过于复杂了。