首页 >社区问答列表 >JS如何控制页面高度来决定是否显示查看更多

JS如何控制页面高度来决定是否显示查看更多

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title>sdfsd</title>    
		<style type="text/css">    
			.demo{    
				width: 100%;    
				height: 500px;    
				overflow: hidden;    
				position: relative;    
			}    
			.art_show{    
				position: absolute;    
		z-index: 900;    
		bottom: 0;    
		margin: 0;    
		padding: 0;    
		width: 100%;    
		height: 50px;    
		border-bottom: 60px solid #f9f9f9;    
		background-image: linear-gradient(hsla(0,0%,100%,0),#f9f9f9);    
		color: #1c6bcc;    
		text-align: center;    
		line-height: 170px;    
			}    
			.pull{    
				position: absolute;    
				width: 16px;    
				left: 50%;    
				top: 54px;    
				margin-left: -8px;    
			}    
		</style>    
	</head>    
	<body>    
		<div class="demo">    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p><p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<div class="art_show"><img src="pull.png" class="pull" />展开全文</div>    
		</div>    
		<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>    
		<script type="text/javascript">    
			$(".art_show").click(function(){    
				$(".demo").css({"height":"auto"});    
				$(".art_show").css({"display":"none"});    
			})    
		</script>    
	</body>    
</html>

如何通过JS控制 demo高度小于500的时候 就不现实展开全文。。。。。。

  •      2018-03-05 17:44:59 2楼

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>sdfsd</title>
    		<style type="text/css">
    			.demo{
    				width: 100%;
    				position: relative;
    			}
    			.art_show{
    			position: absolute;
    			display: none;
    		    z-index: 900;
    		    bottom: 0;
    		    margin: 0;
    		    padding: 0;
    		    width: 100%;
    		    height: 50px;
    		    border-bottom: 60px solid #f9f9f9;
    		    background-image: linear-gradient(hsla(0,0%,100%,0),#f9f9f9);
    		    color: #1c6bcc;
    		    text-align: center;
    		    line-height: 170px;cursor: pointer;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="demo">
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p>zfsdfsdfdxfsdfsdfsdfs</p>
    			<p class="art_show">展开全文</p>
    		</div>
    		
    		<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    
    			var hei=$(".demo").height();
    			$(".demo p:gt(13)").hide();
    			if(hei>500){
    				$(".art_show").show();
    			}
    			$(".art_show").click(function(){
    				$(".demo p:gt(13)").show();
    				$(this).hide();		
    			})
    		</script>
    	</body>
    </html>


    +0 添加回复

  • 回复