列表代码我的第一个封装js代码展开收起效果

上班之余抽点时间出来写写博文,希望对新接触的朋友有帮助。今天在这里和大家一起学习一下列表代码

    第一次靠自己完整的封装的小殊效,有点小小的高兴,和大家分享下,希望能对和我一样在探索的童鞋们有点帮助

    js部份:

    var show_obj = function(obj,at,ob){
$(obj).bind('click', function(){
var showTxt = $(this).children(at);
//alert($(at).html());
//alert(sObj);
//alert();
//alert($(this).parent().children(p).html());
if(showTxt.html() == '+'){
showTxt.html('-')
}else{
showTxt.html('+')
}
$(this).parent().children(ob).slideToggle(300);
})
}

    html 引用:

    $(function(){
show_obj('.slide_show','.slide_show a','.p-silde');
})

    html 代码:

    <ul>

    <li>

    每日一道理
喜欢海,不管湛蓝或是光灿,不管平静或是波涛汹涌,那起伏荡漾的,那丝丝的波动;喜欢听海的声音,不管是浪击礁石,或是浪涛翻滚,那轻柔的,那澎湃的;喜欢看海,不管心情是舒畅的或是沉闷的,不管天气是晴朗的或是阴沉的,那舒心的,那松弛的……

    <div class="clearfix slide_show"><span style="float:left">我有列表</span><a style="float:right">+</a></div>

                <p class="p-silde"  style="display:none">

                

    <a href="#">列表1</a>

                    

    <a href="#">列表2</a>

                    

    <a href="#">列表3</a>

                </p>

    

    </li>

    <li>

    <div class="clearfix slide_show"><span style="float:left">我有列表</span><a style="float:right">+</a></div>

                <p class="p-silde"  style="display:none">

                

    <a href="#">列表1</a>

                    

    <a href="#">列表2</a>

                    

    <a href="#">列表3</a>

                </p>

    

    </li>

    <li>

    <div class="clearfix slide_show"><span>我没有列表</span></div>

    </li>

    </ul>

    PS:记住引用jQuery的框架,兼容ie6以上,火狐,谷歌,ie6没有测试大家可以自己测试

文章结束给大家分享下程序员的一些笑话语录: PC软件体积大,是因为一个PC软件功能往往较多,能够满足你一个方面的需求,而一个iphone软件往往没几行代码,干一件很小的事情,自然需要的软件就多。就像吃西瓜和吃瓜子的来比数目,单位不同啊。

--------------------------------- 原创文章 By
列表和代码
---------------------------------

原文地址:https://www.cnblogs.com/xinyuyuanm/p/3105098.html