jquery 点击查看更多箭头变化，文字变化,超出带滚动条。

最新推荐文章于 2022-11-07 15:03:29 发布

智汇优库

最新推荐文章于 2022-11-07 15:03:29 发布

阅读量2.1k

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/luyinchangdejiqing/article/details/52413418

版权

jquery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!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({ width: "388px"});
            }else{
                $(this).removeClass("up");
                $(".more-content").hide();
                $(".pop-view-more span").html("查看更多");
                $(".pandect-con").css({ height: "auto" });
                $(".popup-box").css({ width: "405px"});
            }
        }); 
    });
    </script>    
</body>
</html>

智汇优库

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery 点击查看更多箭头变化，文字变化,超出带滚动条。

DOCTYPE html>html>head>meta charset="utf-8"/>title>more_up_arrowstitle>style type="text/css">.w1000{width:1000px;margin:0 auto;}.mgt10{margin-top:10px;}.pop-view-more{ display:inline-bloc
复制链接

扫一扫