我可以在一个页面实现,点击展开全文,点击收起,如果页面上有多个这样的段,该怎么处理啊
<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> 展开
<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> 展开
1个回答
展开全部
<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里就可以了
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询