zoukankan      html  css  js  c++  java
  • 列表代码我的第一个封装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
    列表和代码
    ---------------------------------

  • 相关阅读:
    ASP脚本获取服务器全部参数列表说明
    HTML基础教程
    HTML5代码大全
    CSS 属性大全
    Web前端单词大全
    css常用代码大全
    曾国藩:诚敬静谨恒!
    鼠标经过显示菜单
    月入3000+项目
    右侧菜单显示隐藏
  • 原文地址:https://www.cnblogs.com/xinyuyuanm/p/3105098.html
Copyright © 2011-2022 走看看