求一个实例：关于通过ajax和javascript 来实现显示和隐藏一部分内容的特效

比如下面的html记录：如何使用ajax和javascript来实现只是显示前面的6条<dl></dl>内容，其他的内容全部被隐藏。当鼠标点击一个“查看全部”的按钮的时候... 比如下面的html记录：
如何使用 ajax和javascript 来实现只是显示前面的6条<dl></dl>内容，其他的内容全部被隐藏。
当鼠标点击一个“查看全部”的按钮的时候，全部的内容要打开出来。

<div class="com-jh" id="comlist12594">
<dl><dt>ww</dt><dd>鹅鹅鹅87987</dd></dl>
<dl><dt>vv</dt><dd>5764</dd></dl>
<dl><dt>nn</dt><dd>ss</dd></dl>
<dl><dt>222</dt><dd>好好</dd></dl>
<dl><dt>222</dt><dd>vv省得</dd></dl>
<dl><dt>222</dt><dd>vv</dd></dl>

<dl ><dt>222</dt><dd>啊啊啊</dd></dl>
<dl ><dt>1111</dt><dd>脉动</dd></dl>
<dl ><dt>涛哥</dt><dd>动脉</dd></dl>
</div> 展开

 我来答

1个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

yugi111
2014-11-03 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.3亿

我也去答题访问个人页

关注

展开全部

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>JS</title>
<STYLE>
#wrapper {
	float: left;
	width: 130px;
	height: 30px;
	border: 1px solid #e3e3e3;
}

#nav {
	background-color: #fff;
}

#nav ul {
	margin: 0 auto;
	padding: 0;
	width: 130px;
	list-style: none;
	background-color: #fff;
	height: 25px;
}

#nav ul li {
	float: left;
	position: relative;
}

#nav ul li a {
	position: absolute;
	z-index: 9999;
	width: 100px;
	padding: 0px 0px 0px 20px;
	line-height: 25px;
	display: block;
	background-color: #fff;;
	text-decoration: none;
	border-left: 1px solid #fff;
}

#nav ul li a:hover {
	background-color: #7DD1CF;
	color: #fff;
}

#nav ul li span {
	display: none;
	padding-bottom: 1px;
	position: absolute;
	left: 0;
	top: 25px;
	background-color: #7DD1CF;
}
</STYLE>
<script type="text/javascript">
	window.onload = function ()
    {
		showElement ();
    }
    function showElement ()
    {
    	var view = document.getElementById('view');
	    var comlist12594 = document.getElementById ('comlist12594');
	    var dls = comlist12594.getElementsByTagName ('dl');
	    for ( var i = 6; i < dls.length; i++)
	    {
		    if (!dls[i].style.display || dls[i].style.display == 'block')
		    {
			    dls[i].style.display = 'none';
			    view.value = '查看全部';
		    }
		    else
		    {
			    dls[i].style.display = 'block';
			    view.value = '收起';
		    }
	    }
    }
</script>
</head>
<body>
	<div class="com-jh" id="comlist12594">
		<dl>
			<dt>ww</dt>
			<dd>鹅鹅鹅87987</dd>
		</dl>
		<dl>
			<dt>vv</dt>
			<dd>5764</dd>
		</dl>
		<dl>
			<dt>nn</dt>
			<dd>ss</dd>
		</dl>
		<dl>
			<dt>222</dt>
			<dd>好好</dd>
		</dl>
		<dl>
			<dt>222</dt>
			<dd>vv省得</dd>
		</dl>
		<dl>
			<dt>222</dt>
			<dd>vv</dd>
		</dl>
		<dl>
			<dt>222</dt>
			<dd>啊啊啊</dd>
		</dl>
		<dl>
			<dt>1111</dt>
			<dd>脉动</dd>
		</dl>
		<dl>
			<dt>涛哥</dt>
			<dd>动脉</dd>
		</dl>
	</div>
	<input type="button" value="查看全部" id="view" onclick="showElement();" />
</body>
</html>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

求一个实例： 关于通过ajax和javascript 来实现显示和隐藏​一部分内容的特效

其他类似问题

为你推荐：

求一个实例：关于通过ajax和javascript 来实现显示和隐藏一部分内容的特效