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的子元素使其点击时隐藏。
    

  • 相关阅读:
    HDU 1269 迷宫城堡
    HDU 4771 Stealing Harry Potter's Precious
    HDU 4772 Zhuge Liang's Password
    HDU 1690 Bus System
    HDU 2112 HDU Today
    HDU 1385 Minimum Transport Cost
    HDU 1596 find the safest road
    HDU 2680 Choose the best route
    HDU 2066 一个人的旅行
    AssetBundle管理机制(下)
  • 原文地址:https://www.cnblogs.com/slamljp/p/6834202.html
Copyright © 2011-2022 走看看