我可以在一个页面实现,点击展开全文,点击收起,如果页面上有多个这样的段,该怎么处理啊

<html><head><title></title><scriptsrc="jquery-1.11.3.js"></script><script>$(document)... <html>
<head>
<title> </title>
<script src="jquery-1.11.3.js"></script>

<script>
$(document).ready(function(){
$("#btn1").click(function(){
var div=$("div");
$(".box").css("overflow","visible");
$("#btn1").css("visibility","hidden");
$("#btn2").css("visibility","visible");

});
$("#btn2").click(function(){
var div=$("div");
$(".box").css("overflow","hidden");
$("#btn2").css("visibility","hidden");
$("#btn1").css("visibility","visible");

});

});
</script>
</head>

<body>
<div style="width:300px; height:50px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" class="box">
div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容
div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容v
div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容
div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容
div的内容div的内容div的内容div的内容div的内容</div>
<button id="btn1" style="visibility:visible">点击展开</button>
<button id="btn2" style="visibility:hidden">收起</button>

</body>
</html>
展开
 我来答
豆芽君93
推荐于2016-12-05 · TA获得超过165个赞
知道小有建树答主
回答量:122
采纳率:0%
帮助的人:140万
展开全部
<div>
<div style="width:300px; height:auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"  class="box">
div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容
div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容v
div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容
div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容
div的内容div的内容div的内容div的内容div的内容</div>

<button class="btn1" style="visibility:visible">点击展开</button>
<button class="btn2"  style="visibility:hidden">收起</button>
</div>
<div>
<div style="width:300px; height:auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"  class="box">
div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容
div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容v
div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容
div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容div的内容
div的内容div的内容div的内容div的内容div的内容</div>

<button class="btn1" style="visibility:visible">点击展开</button>
<button class="btn2"  style="visibility:hidden">收起</button>
</div>
$(document).ready(function(){
$(".btn1").each(function(){
$(this).click(function(){
$(this).css("visibility","hidden");
$(this).siblings(".box").css("overflow","visible");
$(this).siblings(".btn2").css("visibility","visible");
})
})
$(".btn2").each(function(){
$(this).click(function(){
$(this).css("visibility","hidden");
$(this).siblings(".box").css("overflow","hidden");
$(this).siblings(".btn1").css("visibility","visible");
})
})
  
});

把两段div内容放进一个大的div里就可以了 

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

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式