jq点击显示更多

jq点击显示更多

<div class="js " id="box" style="line-height:20px;overflow:hidden;position:relative">
            <div class="nei">
                一路展展会平台介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 一路展展会一路展展会平台介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 一路展展会一路展展会平台介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 一路展展会
            </div>
</div>
<a href="javascript:void(0)" class="showa"><i class="layui-icon layui-icon-down" style="font-size: .14rem; color: #000000;"></i></a>
<script src="../js/jQuery-2.1.4.min.js"></script>
    <script>
        $(document).ready(function(){
            var oHeight = $('.nei').height();//获取里面div的高度
            oldHeight=oHeight;//把里面div的高度赋值给外面的div
            var newHeight = $("#box").css({height:"44px"});//这个是加载后给外面div设置的一个高度(显示内容的区域)
            if(oHeight<44){//如果里面div的高度小于100的话也就是说内容不多的时候把更多按钮隐藏
                $('.showa').css('display','none')
            }
            $(".showa").click(function(){
            if(parseInt($("#box").height())==oldHeight){
            $("#box").animate({height:"44px"});
            $(this).html('<i class="layui-icon layui-icon-down" style="font-size: .14rem; color: #000000;"></i>');
            }else{
            $("#box").animate({height:oldHeight});
            $(this).html('<i class="layui-icon layui-icon-up" style="font-size: .14rem; color: #000000;"></i>');
            }
            });
        });
    </script>
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页