DIV，CSS如何实现“加减号”“显示隐藏”效果
点击“加”号->会显示隐藏的内容。（这时“加”号变成“减”号）点击“减”号->会隐藏显示的内容。（这时“减”号变成“加”号）就像下面的图。...
点击“加”号 -> 会显示隐藏的内容。 （这时“加”号变成“减”号）
点击“减”号 -> 会隐藏显示的内容。 （这时“减”号变成“加”号）
就像下面的图。 展开
点击“减”号 -> 会隐藏显示的内容。 （这时“减”号变成“加”号）
就像下面的图。 展开
8个回答
展开全部
<script type="text/javascript" src="js/jq.js"></script><!--这里要引入jQuery库-->
<script type="text/javascript">
$(function(){
$(".icon").click(function(){
if($(this).html()=="+"){
$(this).html("-");
}
else{
$(this).html("+");
}
$(".content p").toggle(100);
});
});
</script>
<style type="text/css">
*{margin:0;padding:0;font:12px/16px 宋体;}
.divcon{width:300px;display:inline-table;padding:10px;border:1px solid #CCC;}
.divcon div{float:left;}
.icon{width:20px;height:20px;border:1px solid #666;text-align:center;line-height:20px;cursor:pointer;}
.content{width:270px;padding-left:5px;}
.content p{color:#999;display:none;}
</style>
<div class="divcon">
<div class="icon">+</div>
<div class="content">
这里是文字哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦……
<p>隐藏的文字隐藏的文字隐藏的文字隐藏的文字隐藏的文字隐藏的文字</p>
</div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
（1）1、js方法，这是一般网站常用的方法。
优点：兼容性好，易管理。
实现方式：按钮 onclick 触发 目标div 显示/隐藏。
代码有很多。
2、纯css方法：这是为了应付考试，掌握灵活性而用
缺点：需要支持css3的浏览器，兼容性不佳。
实现方法：利用css的伪类选择，将整个一体放到一个div中，包括 触发按钮、标题、内容。在div的css上写高度、overflow:hidden，在hover或active伪类上写新的高度即可，并不太实用。特意为你写的示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#box { width:400px; height:30px; border:1px #666666 solid; padding:10px; overflow:hidden;}
#box h5{ border:1px #666666 solid; height:30px; margin:0; padding:0;}
#box p{ border:1px #666666 solid;}
#box:hover { height:100px;}
</style>
</head>
<body>
<div id="box">
<h5> + 标题</h5>
<p>这里是内容，也可以用 #box:active { height:100px;}，这是鼠标按下的效果。</p>
</div>
</body>
</html>
（2）CSS是用级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
/*控制显示隐藏*/
function show(obj) {
//alert(obj);
var tr = document.getElementById("tr" + obj);
var td = document.getElementById("td" + obj);
if (td.innerHTML == "+") {
td.innerHTML = "-";
} else {
td.innerHTML = "+";
}
if (tr.style.display == 'block') {
tr.style.display = 'none';
} else {
tr.style.display = 'block';
}
}
我是用table做的可以参考下
function show(obj) {
//alert(obj);
var tr = document.getElementById("tr" + obj);
var td = document.getElementById("td" + obj);
if (td.innerHTML == "+") {
td.innerHTML = "-";
} else {
td.innerHTML = "+";
}
if (tr.style.display == 'block') {
tr.style.display = 'none';
} else {
tr.style.display = 'block';
}
}
我是用table做的可以参考下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1、js方法，这是一般网站常用的方法。
优点：兼容性好，易管理。
实现方式：按钮 onclick 触发 目标div 显示/隐藏。
代码有很多。
2、纯css方法：这是为了应付考试，掌握灵活性而用
缺点：需要支持css3的浏览器，兼容性不佳。
实现方法：利用css的伪类选择，将整个一体放到一个div中，包括 触发按钮、标题、内容。在div的css上写高度、overflow:hidden，在hover或active伪类上写新的高度即可，并不太实用。特意为你写的示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#box { width:400px; height:30px; border:1px #666666 solid; padding:10px; overflow:hidden;}
#box h5{ border:1px #666666 solid; height:30px; margin:0; padding:0;}
#box p{ border:1px #666666 solid;}
#box:hover { height:100px;}
</style>
</head>
<body>
<div id="box">
<h5> + 标题</h5>
<p>这里是内容，也可以用 #box:active { height:100px;}，这是鼠标按下的效果。</p>
</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给加减号定义命名，class或者id，然后用样式display：none；也可以完成隐藏
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（6）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
