DIV，CSS如何实现“加减号”“显示隐藏”效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DIV，CSS如何实现“加减号”“显示隐藏”效果相关的知识，希望对你有一定的参考价值。
点击“加”号 -> 会显示隐藏的内容。 （这时“加”号变成“减”号）
点击“减”号 -> 会隐藏显示的内容。 （这时“减”号变成“加”号）
就像下面的图。
<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 宋体;
.divconwidth:300px;display:inline-table;padding:10px;border:1px solid #CCC;
.divcon divfloat:left;
.iconwidth:20px;height:20px;border:1px solid #666;text-align:center;line-height:20px;cursor:pointer;
.contentwidth:270px;padding-left:5px;
.content pcolor:#999;display:none;
</style>
<div class="divcon">
<div class="icon">+</div>
<div class="content">
这里是文字哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦……
<p>隐藏的文字隐藏的文字隐藏的文字隐藏的文字隐藏的文字隐藏的文字</p>
</div>
</div> 参考技术A
（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（标准通用标记语言的一个子集）等文件样式的计算机语言。
参考技术B /*控制显示隐藏*/
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做的可以参考下 参考技术C
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>本回答被提问者采纳 参考技术D 给加减号定义命名，class或者id，然后用样式display：none；也可以完成隐藏
div 的显示隐藏问题
一个页面有两个div 层，和两个按钮，就是说我选择其中一个div显示而点击另一个div 显示的时候，界面必须只能显示一个div。
这个就用jquery了，很方便 在你的页面里包含一个jquery的js文件，先网上下下来，放在你的一个目录下包含到页面里<script src="js文件的目录" type="text/javascript"></script> <div class="div1" style="display:none;">先设置为隐藏</div><div class="div2">这个为显示的</div>两个按钮<input type="button" name="button1" value="button1" onclick="Button1();"/><input type="button" name="button2" value="button2" onclick="Button2();"/> <script type="text/javascript">//点击button1，显示div1；反之，显示div2function Button1() $(".div1").show(); $(".div2").hide(); function Button2() $(".div1").hide(); $(".div2").show();</script>这个是最简单的jquery运用 参考技术A <style>buttonoutline:0;
divwidth:300px;height:200px;display:none;
.redcolor:#fff;background:red;
.bluecolor:#fff;background:blue;
</style>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function()
$('button').click(function()
var index=$(this).index();//获取被点击的按钮索引
$('div').eq(index).show().siblings('div').hide();//图层切换，不受限制，可随意加减按钮和图层，只要按钮跟图层数量一致即可。
$(this).addClass($('div').eq(index).attr('class')).siblings('button').removeAttr('class');//让按钮背景也和图层一致。
).eq(0).click();//默认第一个按钮被点击。
);
</script>
<button>红色层</button><button>蓝色层</button>
<div class="red"></div><div class="blue"></div>
以上是关于DIV，CSS如何实现“加减号”“显示隐藏”效果的主要内容，如果未能解决你的问题，请参考以下文章