默认隐藏一部分内容,点击展开显示更多,这种效果jquery怎么做?

html-css024

默认隐藏一部分内容,点击展开显示更多,这种效果jquery怎么做?,第1张

这个功能其实很容易实现,我在这告诉你思路一个思路和步骤:

1、把要显示的原样输出,作为更多要隐藏的内容你就用style="display:none"属性把它先隐藏;

2、给查看更多绑定点击事件,点击后show你要展示的内容;

实际代码如下:html 代码

Jquery代码:

扩展资料

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

参考资料:百度百科 jQuery

给你举个例子:

<script language="javascript">

function show_div(){

var obj_div=document.getElementById("starlist")

obj_div.style.display=(obj_div.style.display=='none')?'block':'none'

}

function hide_div(){

var obj_div=document.getElementById("starlist")

obj_div.style.display=(obj_div.style.display=='none')?'block':'none'

}

</script>

<a href="javascript:show_div()" >显示/展开</a>

<div id="starlist">

内容<br/>

内容<br/>

内容<br/>

内容<br/>

</div>

这样就可以实现

追问

用jQuery实现,该怎么实现?就是不能弹出的那种,就要一个点击了之后就在下方显示的那种,谢谢!

回答

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gbk" />

<title>StripingTable</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

<!--

$(document).ready(function(){ })

function changeDisplay(){

var helloDivObj = $("#helloDiv")

var buttonObj = $("#btnDisplay")

var val = buttonObj.attr("value")

if(val=="隐藏"){

helloDivObj.hide()

buttonObj.attr("value","显示")

}else{

helloDivObj.show()

buttonObj.attr("value","隐藏")

}

}

-->

</script>

</head>

<body>

<input id="btnDisplay" type="button" value="隐藏" onclick="changeDisplay()"/>

<div id="helloDiv">

Hello,everyone<p></p>

Hello,everytwo<p></p>

Hello,everythree<p></p>

</div>

</bdoy>

</html>

这个还真见过,,,是一个仿flash的菜单

不过还真找不到了,,,刚才搜索一下没看到,你自己搜索一下看看,,又好像是在一些酷站推荐上看到的,,,,不太记得

搜索

html5+css3 圆 仿flash

css3 圆 仿flash

只能慢慢找了,,,