方法一：1 &script type="text/javascript"&
<span style="color: # $(function() {
<span style="color: #
$("#toggle").click(function() {
<span style="color: #
$(this).text($("#content").is(":hidden") ? "收起" : "展开");
<span style="color: #
$("#content").slideToggle();
<span style="color: #
<span style="color: # });
<span style="color: # &/script&
<span style="color: # &a href="#" id="toggle"&展开&/a&
<span style="color: # &div id="content" style="display:"&&p&隐藏内容&p&&p&隐藏内容&p&&/div&
1 &script&
2 /*展开和收起用一个div,也可以说它是个按钮,假设它的id=d1;
3 假设需要显示和隐藏的div叫d2;
4 下面这段代码只是粗略的实现了你的要求,主要是给你提供个思路;
6 $(function(){
7 $('#d1').click(function(){//给d1绑定一个点击事件;
/*这个判断的意义是,如果d2是隐藏的,那么让它显示出来,并将d1的文本内容替换成收起,
<span style="color: #
如果是显示的,那么就隐藏它并将d1的文本内容替换为展开;*/
<span style="color: #
if($('#d2').is(':hidden'))
<span style="color: #
<span style="color: #
$('#d2').slideDown('slow');
<span style="color: #
$(this).text('收起');
<span style="color: #
<span style="color: #
$('#d2').slideUp('slow');
<span style="color: #
$(this).text('展开');
<span style="color: #
<span style="color: #
<span style="color: #
/*这是一个很简单的事件处理,如果还需要跟上图片的变换,就在判断的对应位置写入图片或者背景变换的代码,*/
<span style="color: # });
<span style="color: # });
<span style="color: # &/script&
<span style="color: # &div id='d1'&展开&/div&
<span style="color: # &div id='d2' style=" display:none"&内容&/div&
阅读(...) 评论()css div块之间为什么互相影响？选择器的定义，难道可以相互干扰吗？_百度知道
css div块之间为什么互相影响？选择器的定义，难道可以相互干扰吗？
&body&&divid=&d1&&div1&/div&&divid=&d2&&div2&/div&&divid=&d3&&div3&/div&&/body&/*CSSDocument*/#d1,#d2{border:solid1width:100height:100float:}#d3{border-s...
&div id=&d1&&div1&/div&
&div id=&d2&&div2&/div&
&div id=&d3&&div3&/div&
/* CSS Document */#d1,#d2{ border:solid 1 width:100 height:100 float:
}#d3{ border-style:solid width:300 height:10 clear: }d3又没有设置它漂浮，为何要清除漂浮呢？清除的谁的漂浮，他里面的实质是什么啊？块之间就是相互干扰的吗？
&#xe6b9;答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
www0574178com
www0574178com
采纳数：58
获赞数：107
亲：1、纯粹的DIV，不包含CSS的话，DIV是占一行的，是一块一块的布局。3个DIV，就是3个横条，标准的输出流：依次往下排。2、当包含CSS，添加你的CSS Document。结构如下：a、body下面包含三个divb、此时d1、d2有float:left，所以d1、d2就跳出标准的输出流布局，会依次浮动起来，浮动在body的左侧【或者说是d3的左侧】。c、对于d3，分情况：
c1、如果不加clear:both，那么d3是标准是输出流布局，是占一行的。但由于d1、d2是浮动的，你可以想象是d3的左侧部分空间被d1、d2挤出来了【或者感觉d3左侧的部分空间，被d1、d2覆盖了】。
c2、添加样式clear:both，就清除了由于d1、d2的浮动引起的后续浮动问题。自然，d3就另起一行。
c1、如果不加clear:both，那么d3是标准是输出流布局，是占一行的。但由于d1、d2是浮动的，你可以想象是d3的左侧部分空间被d1、d2挤出来了【或者感觉d3左侧的部分空间，被d1、d2覆盖了】。问题： 1、纯粹的DIV，不包含CSS的话是标准的输出流，d3有css，也是标准的输出流吗？ 2、标准的输出流，就算前面有d1d2，
d3也会视而不见，按照标准的输出流来，出现在第一行吗？
1、不包含特殊定位的css，比如float，绝对定位。div就是占一行。2、是的。但是d1d2对后续的元素会有浮动影响。你可以用火狐的firebug查看具体的影响。
采纳数：110
获赞数：1444
你试试一种自己尝试的学习方法。从少到多增加元素，然后观察用CSS改变样式后的变化。第一步：HTML代码：&div&id=&d1&&div1&/div&CSS代码：#d1&{ border:solid&1px& width:100 height:100 }这么一来只能看见#d1的边框和宽度高度。这是最基础的一步。第二步：HTML代码：&div&id=&d1&&div1&/div&&div&id=&d2&&div2&/div&CSS代码：#d1&{ border:solid&1px& width:100 height:100
}#d2&{ border:solid&1px& width:100 height:100
}分别对#d1 #d2设置样，去掉float:left。这时可以看见#d1 #d2分别设置了边框和高度宽度。#d1 #d2分别在不同的行里面。第三步：HTML代码：&div&id=&d1&&div1&/div&&div&id=&d2&&div2&/div&CSS代码：#d1&{ border:solid&1px& width:100 height:100 float:
}#d2&{ border:solid&1px& width:100 height:100
}分别对#d1 #d2设置样。#d1加上float:left。这时可以看见#d1 #d2分别设置了边框和高度宽度。#d1 #d2在同一行里面。第二步和第三步的区别是对#d1多使用了float:left，所以有这样的结果，这就证明在#d2前的#d1使用了float:left会对#d2产生影响。第四步：HTML代码：&div&id=&d1&&div1&/div&&&&&&div&id=&d2&&div2&/div&&&&&div&id=&d3&&div3&/div&CSS代码：#d1,#d2{ border:solid&1px& width:100 height:100 float:
}#d3{ border-style:solid width:300 height:10 }此时可以看见#d1 #d2的边框和高度宽度，#d3看见宽度和高度。#d2浮动在#d1的左边#d3浮动在#d2的左边。第五步：HTML代码：&div&id=&d1&&div1&/div&&&&&&div&id=&d2&&div2&/div&&&&&div&id=&d3&&div3&/div&CSS代码：#d1,#d2{ border:solid&1px& width:100 height:100 float:
}#d3{ border-style:solid width:300 height:10 clear:& }此时可以看见#d1 #d2的边框和高度宽度，#d3看见宽度和高度。#d2浮动在#d1的左边，#d3不再浮动在#d2的左边，而是另起一行，因为#d3使用了clear:both，清除了因为#d2导致的浮动。只有自己学会把HTML代码和CSS代码分解来研究，才是最好的掌握HTML和CSS的办法，不然如果我说：前一个元素使用了浮动，后一个元素就跟着浮动；后一个元素使用了清除样式，就不会跟着前一个元素浮动。这么说，虽然对，但是很抽象，对理解问题帮助太小。另外float还有很多特点，但是都可以通过用这样分解HTML和CSS的方法掌握得到。
第四步，你说，#d2浮动在#d1的左边#d3浮动在#d2的左边。但是实际上d3是在d1的位置上的啊，你知道为什么吗？
Chrome和Firefox确实是这么样的浮动效果（加上边框和背景颜色）：此时，div3的内容浮动在div2后，同时div3的宽度实际上比原来宽很多，这是浮动的真是效果，证明浮动是比较难控制的。如果div3加上float:则变成：所以说，浮动在一些情况下是比较难控制的。浮动用得多的地方有：文字围绕着一张图片。像报纸或者杂志的排版。这时候，文字是浮动的效果。当然图片可以用其他元素替换。自适应布局。就是缩小屏幕宽度的时候，横向内容放不下的时候，自动跳到下一行。例如一个网页在普通电脑打开的时候width:960，用平板电脑打开的时候width:768px，横向放不下的一列因为使用了float所以会自动滚动到下一行显示。你用google搜索：CSS float浮动的深入研究、详解及拓展(一) &张鑫旭-鑫空间-鑫生活这个人的空间有更深入的介绍说明。
采纳数：12
获赞数：18
d3 清除浮动是因为
d1 和 d2 都float 了。你可以在 这3个容器的外面再套一个 div ，先不写 d3 的 clear:both ，你看下就知道效果了
Prince____Yu
来自电脑网络类芝麻团
Prince____Yu
采纳数：424
获赞数：3274
参与团队：
是这样的：首先：html每个标签都有他们的元素属性，这里的div就是块元素，那么就是独占一行，这一点应该是毫无疑问的吧？然后就是浮动的问题，浮动其实就是离开元素格式化的上下文了，浮起来，这个时候你可以理解为#d1和#d2都是在#d3的上一层（用z坐标的角度去看）。所以#d3会尽可能往上跑。d3又没有设置它漂浮，为何要清除漂浮呢？是的，d3没有设置浮动，但是d1，d2的浮动深深的影响了d3的布局，所以她要正常排列，必须要清楚别人对她的影响。所以换句话说，如果每个有浮动的元素如果在元素本身就做好闭合浮动的话，那么就不会对其他无辜元素产生影响，那些无辜的元素也不用去清楚浮动了。百度搜一下：那些年我们一起清除过的浮动这里会让你光然大悟！希望我的回答能帮到你哈，有问题可以追问，觉得好就点个赞，有用就采纳！
梦很甜0505
来自电脑网络类芝麻团
梦很甜0505
采纳数：72
获赞数：314
参与团队：
假如一个屋子里有3个气球，其中的两个已经飘到了屋顶，你只想这两个气球飘到屋顶，而不让别的气球飘到屋顶，你会怎么做，你肯定会用一块木板在这两个气球下面隔起来，其他的就不会飘到屋顶了
采纳数：386
获赞数：406
套用一个前辈的话说：这就是浮动的奥秘哦，建议你百度一下 float 参数，学习一下就明白了。
那前辈是谁，你是否等到了他的真传啊？百度 float 参数，内容好杂，没找到
其他4条回答
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。遇到一个问题。用.net做的网站中有三个div，他们是嵌套的关系
&div id="d1"&
&div id="d2"/&
&div id="d3"/&
d2和d3是上下并列的。d1的高度是不变的，在d2中的内容发生变化的时候，d2的高度会跟着内容的多少发生变化，d3也跟着变化，但是不会超出d1的高度范围，即不会出界。
这个问题，测试使用的ie，没有问题，但是在google中就有问题了。
先看一些代码吧：
d3的css是这样写的
.d3{height:200width:100}
d2的css是这样的
.d2{height:100width:100}
这写代码在IE中测试是可以的，不会出现div出界，但是google中当d2中的内容增多的时候，d2和d3就会出现重叠，即d2出界了。
解决办法：
d3的css是这样写的
.d3{min-height:200width:100}//这里min-heigh跟height是不同的，min-height可以使得div根据内容自动的调整div的高度，不出界
d2的css是这样的
.d2{height:auto!width:100}//auto!important可以使得div自动的适应页面的高度，即当收到“挤压”或者“拉伸”的时候，会自动的变化。
这样，出现的问题解决。
渲染之前window.onload是一个值，渲染完成之后是另一个值。
http://www.w3help.org/zh-cn/causes/RD5017
行高没有设置，导致渲染前计算的行高...
HTML中高度和宽度的获取，跨浏览器兼容性，以及jQuery中操作
1.input在所有浏览器以及所有的版本中，都是定义了高度，然后再定义padding或者border值，这时候都会撑开，高度是本身的高度在padding值和border值
2.select在gool...
在框架中嵌套了页面，页面中有些DIV，但都没有具体高度时，需要让一个div高度自适应时的解决办法
下面是笔者用js来判断不同浏览器的分辨率来动态设置的div高度
var getDiv = d...
在浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试和浏览器兼容性问题解决方法，已在IE、FF、Chrome测试中已经对浏览器中存在的CSS的兼容性和JS的兼容性进行了简单说明，现...
js 获取页面高度和宽度兼容 ie firefox chrome等
//得到页面高度
var yScroll = (document.documentElement.scrollHeight &document.documentElement.clientHeigh...
解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题
在页面上用了iframe带来方便的同时也带来了麻烦，在IE6里能正常显示的iframe在其他的浏览器里确十分丑陋而不方便。
为了解决IE,Firefox,chrome,safari中iframe显示...
ie11下页面显示不正常，hight获取不正确
在前一阵子，公司的网站需要兼容ie11。在刚开始的时候，网站在ie11浏览器下显示会有异常，本应该是填充满整个浏览器的页面，现在高度只有250左右。
刚开始以为是html元素的css设置不对，一直在...
没有更多推荐了，三菱PLC中指令DIV·D0·D2·D4,其中D0值为5,D2值为2,D4和D5值为多少_百度知道
三菱PLC中指令DIV·D0·D2·D4,其中D0值为5,D2值为2,D4和D5值为多少
&#xe6b9;答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
冬蟲草1107
来自科学教育类芝麻团
冬蟲草1107
采纳数：74
获赞数：146
擅长：暂未定制
参与团队：
d4放商为2.D5放余数为5
余数为1，说错了
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。Jquery实现select表单里选择不同的值一些隐藏的div显示出来 - ITeye问答
select默认值：--& 其他值：java& c& net
&div id="d1"&&/div&
&div id="d2"&&/div&
&div id="d3"&&/div&
选择java时显示d3& 选择net时显示d1
超级简单的。可是我没用过，想请教。谢谢。
采纳的答案
&select id="s"&
&option value=""&--&/option&
&option value="java"&java&/option&
&option value="c"&c&/option&
&option value="net"&net&/option&
&div id="d1" style="display:"&&/div&
&div id="d2" style="display:"&&/div&
&div id="d3" style="display:"&&/div&
var map = {"java":"d1", "c":"d2", "net":"d3"};
$("#s").bind("change", function(){
var divId = map[this.value];
$("#"+divId).show().siblings().hide();
&select id="test"&
& &option value="-1"&--&/option&
& &option value="0"&java&/option&
& &option value="1"&c&/option&
& &option value="2"&net&/option&
&/select&
$('#test').bind('change', function(){
& var val = $(this).val();
& switch(val){
& case '-1': ......;
& case '0': $('#d3').show(); $('#d1, #d2').hide();
& case '1':
& case '2': ................自己照着写吧
& }
});
如果是jquery1.7把bind换成on
代码没测试，反正就是这么个意思
已解决问题
未解决问题