• jQuery手风琴


    jQuery版的手风琴
    好久没写东西了,今天弄了个简单的手风琴效果,希望大家多多支持。也希望能够帮助到刚刚接触jQuery的朋友。

    css部分,就是样式效果。

    #qin{
        300px;
        text-align:center;
        margin:50px auto;
    }
    #qin>div{
    
        background:yellow;
    }
    #qin>div>div{
        border-bottom:1px #ccc dashed;
        display:none;
        height:30px;
        line-height:30px;
    }
    #qin>div>div:nth-child(4){
        border:none;
    }
    #qin>div>p{
        border-bottom:1px #fff solid;
        height:50px;
        background:#ccc;
        color:#3e2daa;
        line-height:50px;
    }
    #shouye{
        color:#008800;
        height:80px;
        line-height:80px;
    }
    

    html部分。

    <div id="qin">
        <div id="shouye" style="background:#880000">
            <h2>前端知识</h2>
        </div>
        <div>
            <p>第一章</p>
            <div>html1</div>
            <div>html2</div>
            <div>html3</div>
        </div>
        <div>
            <p>第二章</p>
            <div>css1</div>
            <div>css2</div>
            <div>css3</div>
        </div>
        <div>
            <p>第三章</p>
            <div>javascript1</div>
            <div>javascript2</div>
            <div>javascript3</div>
        </div>
        <div>
            <p>第四章</p>
            <div>jQuery1</div>
            <div>jQuery2</div>
            <div>jQuery3</div>
        </div>
        <div>
            <p>第五章</p>
            <div>vue.js1</div>
            <div>vue.js2</div>
            <div>vue.js3</div>
        </div>
    </div>
    

    js:主角登场jQuery简单但是就是没有看着原生的清爽,习惯了就好。

    $("#qin>div>p").click(function(){  //这句是给p标签加了个点击事件
        $(this).css("color","yellow").css("background","red")//点击当前的p加了个字体颜色和背景颜色
        .nextAll().slideDown()//展开当前元素的同辈元素
        .end().parent().siblings()//返回上一次的操作对象找到同胞兄弟
        .children("p").css("color","#3e2daa").css("background","#ccc")//下边的p改回字体颜色和背景颜色
        .end().children("div").hide();//返回上一次的操作对象找到下边的div 并进行关闭
    
    })
    

    完毕,大家多交流,同学习同进步。

  • 相关阅读:
    Python网络编程 —— 粘包问题及解决方法
    Python网络编程 —— socket(套接字)及通信
    Python网络编程 —— 网络基础知识
    Python
    MySQL 之 数据的导出与导入
    MySQL 之 慢查询优化及慢日志管理
    MySQL 之 索引进阶
    MySQL 之 索引
    MySQL 之 事务
    MySQL 之 表的存储引擎
  • 原文地址:https://www.cnblogs.com/eeeew/p/6832261.html
Copyright © 2020-2023  润新知