论坛首页 Web前端技术论坛

自己实现一个简单的JQuery下的accordion

浏览 3732 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-05-28  
1.添加javascript代码:
//Design By Eric Xu 2008-5-28
function accordion(cz){
    this.prototype=create();
    function create(){
        $('dl.'+cz+' > dd').hide();
        $('dl.'+cz+' > dt').click(function(){
            var content = $(this).next();
            var others = content.parent().find("dd:visible");
            if (others.length&&others.html()!=content.html()){
                others.slideUp('fast', function() {
                    content.slideToggle('fast');
                });
            }else{content.slideToggle('fast');}
        });
    }
}


2.编写html代码:
<dl class="gaga">

    <dt>haha</dt>
    <dd>i am haha<br/><br/><br/><br/></dd>

    <dt>haha2</dt>
    <dd>i am haha2<br/><br/><br/><br/></dd>

</dl>


3.添加javascript代码
new accordion("gaga");


4.搞定啦。

感觉挺好使 大家快试试。
   发表时间:2008-05-28  
呵呵 ,楼主的写法好像跟JQUERY的风格不太一样。
0 请登录后投票
   发表时间:2008-05-29  
comasp 写道
呵呵 ,楼主的写法好像跟JQUERY的风格不太一样。

恩恩~对!写的时候没注意。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics