为网页添加 点击展开更多

csx

有时候一个网页内容很多，于是网页的高度会变得很长   简单操作添加   点击展开更多


首先添加所需的css，在内容的div下面添加一个div：

[HTML] 纯文本查看 复制代码

<div class="btn_more" style="display:none">点击展开更多</div>

对应的css样式：

[CSS] 纯文本查看 复制代码

.btn_more {
    width: 320px;
    height: 52px;
    background: #2bc2ed;
    line-height: 52px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    margin: 15px auto 0;
    cursor: pointer;
}

在网页</head>结尾前 添加一点js代码，要使用到jq所以事先需引入jq库：

[JavaScript] 纯文本查看 复制代码

    var bodyheight = $(".contentzw").height();
    if (bodyheight > 1500) {
        $('.contentzw').css('height', '1500px');
$('.contentzw').css('overflow-y', 'hidden');
        $(".btn_more").css('display', '');
    }
    $(function() {
        $('.btn_more').click(function() {
            var my_text = $(this).text();
            if (my_text == "点击展开更多") {
                //$('.contentzw').addClass('height_auto');
                $('.contentzw').css('height', 'auto');
$('.contentzw').css('overflow-y', 'visible');
                $(this).text('点击收起')
            } else {
                //$('.contentzw').removeClass('height_auto');
                $('.contentzw').css('height', '1500px');
$('.contentzw').css('overflow-y', 'hidden');
                $(this).text('点击展开更多')
            }
        })
    })