jquery实现查看全部示例

最新推荐文章于 2023-09-09 14:33:09 发布

夏已微凉、

最新推荐文章于 2023-09-09 14:33:09 发布

阅读量750

点赞数

分类专栏： # Js（JQuery）文章标签：展开

本文链接：https://blog.csdn.net/qq_36025814/article/details/90313205

版权

Js（JQuery）专栏收录该内容

56 篇文章 2 订阅

订阅专栏

jquery实现查看全部示例

一、效果

二、代码

<!DOCTYPE html>
<html lang="en">
	<head>
    <meta charset="utf-8">
    <title>jquery实现查看全部示例</title>
    <style type="text/css">
		.content{ 
			width:200px;
			padding: 10px; 
			border: 1px solid blue;
			background: #B0ECFF;
			border-radius:5px;
		}
		.content_hide{
			height: 186px;
			overflow:hidden;
		}
		button{
			margin-left:60px;
		}
	</style>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<p>
		<div class="content content_hide">
			
			<p>观沧海_百度汉语

			<p>作者：曹操
			<p>东临碣石，以观沧海。
			<p>水何澹澹，山岛竦峙。
			<p>树木丛生，百草丰茂。
			<p>秋风萧瑟，洪波涌起。
			<p>日月之行，若出其中。
			<p>星汉灿烂，若出其里。
			<p>幸甚至哉，歌以咏志。

		</div>
		<p>
		<div>
			<button>查看全部</button>
		</div>
	</body>
  
	<script type="text/javascript">
		$('button').click(
			function(){
				$('body').find('div.content_hide').removeClass('content_hide');
				$(this).parent().remove();
			}
		);
	</script>

</html>