JS点击收缩与展开
我要现实一个效果，现在却不知道该怎么做了，在网上找了很久也没有找到自己想要的效果，我要的效果很简单。一个页面里面有很多个标签，而且标签内容是用程序套用的，不能改标签，只能...
我要现实一个效果，现在却不知道该怎么做了，在网上找了很久也没有找到自己想要的效果，我要的效果很简单。
一个页面里面有很多个标签，而且标签内容是用程序套用的，不能改标签，只能在标签上面添加ID或name
默认显示8个，其他的全部隐藏掉，少于8个全部显示，多于8个就隐藏，然后点击展开按钮全部显示出来，这个要怎么做呢？不能设置高度，只能控制它的个数，在线的同学，帮个忙啊！谢谢！！在线等
额，刚刚忘记说清楚了，我要的效果是：
<div>
<a name="aDiv">点击</a>
<ul name='aliDiv'>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
</ul>
</div>
默认显示8个，其他的全部隐藏，少于8个全部显示，多于8个就隐藏，点击展开按钮<a name="aDiv">点击</a>全部显示出来，再点击<a name="aDiv">点击</a>除处8个之外其他的全部隐藏，这个要怎么做呢？ 展开
一个页面里面有很多个标签，而且标签内容是用程序套用的，不能改标签，只能在标签上面添加ID或name
默认显示8个，其他的全部隐藏掉，少于8个全部显示，多于8个就隐藏，然后点击展开按钮全部显示出来，这个要怎么做呢？不能设置高度，只能控制它的个数，在线的同学，帮个忙啊！谢谢！！在线等
额，刚刚忘记说清楚了，我要的效果是：
<div>
<a name="aDiv">点击</a>
<ul name='aliDiv'>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
</ul>
</div>
默认显示8个，其他的全部隐藏，少于8个全部显示，多于8个就隐藏，点击展开按钮<a name="aDiv">点击</a>全部显示出来，再点击<a name="aDiv">点击</a>除处8个之外其他的全部隐藏，这个要怎么做呢？ 展开
4个回答
展开全部
<style>
#box .hid{display:none;}
#box .show{display:block;}
</style>
<body>
<ul id="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
<p id="tog">展开</p>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
var len=$("#box li").length;
function int(){
for(i=8;i<len;i++){
$("#box li").eq(i).addClass("hid");
}
}
$("#tog").click(function(){
var t=$(this).text();
if(t=="展开"){
$("#box .hid").addClass("show");
$(this).text("收缩");
}else{
$("#box .hid").removeClass("show");
$(this).text("展开");
}
});
int();//初始化隐藏多余标签
</script>
最好是用样式来控制显示隐藏show和hide，从jquery对dom的操作速度方便来考虑的话。
里面标签随便你写什么 只要标签外部有个div 的ID 是box就可以
更多追问追答
追问
哥！你说的这个正是我想要的效果，只是不知道你这个为什么有跳动？
追答
跳动是因为加载jquery库需要一段时间。我写的是调用的外网的jquery肯定有点慢，另外你要想一开始就把多余的隐藏，最好的办法就是程序判断第9个开始输出一个class="hid"，这样最靠谱。或者换个思路首先将所有的隐藏 用js来将前面8个显示出来。int那个方法改一下就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把他们的标签name起一个名字吧 在这里我就起名叫allDiv
<script>
//页面加载时调用
function showEight(){
var divs=document.getElementsByName("allDiv");
var length=divs.length<8?divs.length:8;
for(var i=0;i<length;i++){
divs[i].style.display="block";
}
}
//按钮的点击事件
function showAll(){
var divs=document.getElementsByName("allDiv");
for(var i=0;i<divs.length;i++){
divs[i].style.display="block";
}
}
</script>
希望对你有帮助，望采纳O(∩_∩)O
<script>
//页面加载时调用
function showEight(){
var divs=document.getElementsByName("allDiv");
var length=divs.length<8?divs.length:8;
for(var i=0;i<length;i++){
divs[i].style.display="block";
}
}
//按钮的点击事件
function showAll(){
var divs=document.getElementsByName("allDiv");
for(var i=0;i<divs.length;i++){
divs[i].style.display="block";
}
}
</script>
希望对你有帮助，望采纳O(∩_∩)O
更多追问追答
追问
这位兄弟，你能不能把html代码部份粘贴出来呢？我想看看你是怎么做的，嘻嘻，你这个貌似只有展开的吧？没有隐藏的啊？
追答
html代码
1
2
3
4
5
6
7
8
9
js代码也改一下
//页面加载时调用
function showEight(){
var divs=document.getElementsByTagName("span");
var length=divs.length<8?divs.length:8;
for(var i=0;i<length;i++){
divs[i].style.display="block";
}
}
//按钮的点击事件
function showAll(){
var divs=document.getElementsByTagName("span");
for(var i=0;i<divs.length;i++){
divs[i].style.display="block";
}
}
我这边成功了，你试一下吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
function showOrHidden(num,$obj){
if($obj.size<=num){
$obj.css("display","block");
}else{
for(var i=0;i<$obj.size;i++){
if(i<num){
$obj.get(i).css("display","block");
}else{
$obj.get(i).css("display","none");
}
}
}
初始化的时候执行以下该函数传入两个参数，显示多少个，还有就是标签对象（使用jquery选择器）
至于展开按钮，你可以在执行一次改按钮，将标签对象的大小传入进去(jquery的size)方法；相当于显示所有
不知道是不是你想要的结果
}
if($obj.size<=num){
$obj.css("display","block");
}else{
for(var i=0;i<$obj.size;i++){
if(i<num){
$obj.get(i).css("display","block");
}else{
$obj.get(i).css("display","none");
}
}
}
初始化的时候执行以下该函数传入两个参数，显示多少个，还有就是标签对象（使用jquery选择器）
至于展开按钮，你可以在执行一次改按钮，将标签对象的大小传入进去(jquery的size)方法；相当于显示所有
不知道是不是你想要的结果
}
追问
嘻嘻，你这个比较简单，我只是不知道下面的html代码要怎么调用才能出来效果呢
追答
初始化的时候调用showOrHidden(8,$("aliDiv li"));
点击展开的时候showOrHidden($("aliDiv li").size(),$("aliDiv li"));
点击收缩的时候再执行一次showOrHidden(8,$("aliDiv li"));
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>内容</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
追问
谢谢你的回答，你这个不要我想的效果啦，刚刚我没有说清楚，现在我已经把问题补充了，谢谢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
