zoukankan      html  css  js  c++  java
  • 超简单jQuary链式操作代码实现手风琴效果

    超简单jQuery代码实现手风琴效果


    HTML代码

     <div id="cont">
        <div>
            <p>人生若只如初见</p>
            <div>
                <img src="img/1.jpg">
            </div>
        </div>
        <div>
            <p>何事秋风悲画扇</p>
            <div>
                <img src="img/2.jpg">
            </div>
        </div>
        <div>
            <p>等闲变却故人心</p>
            <div>
                <img src="img/3.jpg">
            </div>
        </div>
        <div>
            <p>却道故人心易变</p>
            <div>
                <img src="img/4.jpg">
            </div>
        </div>
    </div>
    

    css代码

      body{margin: 0;padding: 0;background: darkgoldenrod;position: relative;}
        body html{height:100%;}
        #cont{
            position: absolute;
             500px;
            background: red;
            margin-left: 400px;
            margin-top: 100px;
        }
        #cont>div>p{
            margin: 0;
            background: pink;
            border-bottom: 1px solid #fff;
            text-align: center;
            line-height: 70px;
            font-size: 20px;
            color: cornflowerblue;
            font-weight: bold;
            font-family: fantasy;
        }
        #cont>div>div{
            height: 150px;
            display: none;
        }
        #cont>div>div>img{
             500px;
            height: 150px;
        }
    

    js代码

     $("#cont>div>p").click(function(){//为当前元素p添加点击事件
        $(this).nextAll().slideDown().//查找当前元素之后所有的同辈元素使其显示。
            end().parent().siblings().//取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
               children("div").hide();//获取父元素下的所有叫div的子元素使其点击时隐藏。
    

  • 相关阅读:
    pip 配置国内源
    python + excel工资条自动生成
    Mysql 查看表结构
    win10中Pycharm连接mysql时区错误的解决
    kali linux中mariadb加上密码
    静态链表的基本操作
    静态链表dd
    静态链表
    单链表的基本操作
    单链表
  • 原文地址:https://www.cnblogs.com/slamljp/p/6834202.html
Copyright © 2011-2022 走看看