zoukankan      html  css  js  c++  java
  • jquery 点击查看更多箭头变化,文字变化,超出带滚动条。

    从网上好了好久,没找到自己要的,自己写了一下。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>more_up_arrows</title>
    <style type="text/css">
    .w1000{width:1000px;margin:0 auto;}
    .mgt10{margin-top:10px;}
    
    .pop-view-more{
        display:inline-block;
        width:180px;
        height:26px;
        border: 1px solid #cfd1d4;
        line-height:24px;
        text-align:center;
        border-radius: 4px;
        cursor: pointer;
    }
    .pop-view-more span{
        margin-right:5px;
        color:#555;
        font-size:12px;
    }
    .pop-view-more i{
        display:inline-block;
        width: 8px;
        height: 9px;
        background: url("http://images.cnblogs.com/cnblogs_com/iflygofy/817791/o_view_arrow_down.png") no-repeat 0 0;
    }
    .pop-view-more.up i{
        background-position:0 -10px;
    }
    .more-content{
        height:500px;
        padding:10px;
        border: 1px solid #cfd1d4;
    }
    </style>
    </head>
    <body>
        <div class="w1000">
            <div class="pandect-con">
                <div class="popup-box mgt10 clearfix">
                    <div class="more-option">
                        <label class="pop-view-more"><span>查看更多</span><i></i></label>
                    </div>
                    <div class="more-content" style="display:none;">
                        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                    </div>
                </div>
            </div>
        </div>
    
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
        $(document).ready(function() {
            $(".pop-view-more").click(function(){    
                if($(".pop-view-more span").html() == '查看更多'){
                    $(this).addClass("up");
                    $(".more-content").show();
                    $(".pop-view-more span").html("点击收起");
                    $(".pandect-con").css({ height: "350px", overflow: "auto" });
                    $(".popup-box").css({  "388px"});
                }else{
                    $(this).removeClass("up");
                    $(".more-content").hide();
                    $(".pop-view-more span").html("查看更多");
                    $(".pandect-con").css({ height: "auto" });
                    $(".popup-box").css({  "405px"});
                }
            }); 
        });
        </script>    
    </body>
    </html>
  • 相关阅读:
    tr加不上边框
    placeholder 用法
    <input/>文本输入框效果:
    colspan="2"、列、rowspan="3"、行、用法!
    CSS--实现小三角形
    “div+css”下拉菜单
    HDU4624 Endless Spin(概率&&dp)
    chanme的博客搬家了!
    HDU5487 Difference of Languages(BFS)
    HDU5469 Antonidas(树分治&&哈希)
  • 原文地址:https://www.cnblogs.com/iflygofy/p/5808017.html
Copyright © 2011-2022 走看看