div显示与隐藏
0
悬赏园豆：10
[待解决问题]
标题1
内容1
标题2
内容2
点击标题1，就隐藏内容1这个div，再点击标题1，又把内容1显示出来
点击标题2，就隐藏内容2这个div，再点击标题2，又把内容2显示出来
这里可能不只有2个，如果有N个该如何写CSS样式
<div style="background: red; border: 1px; height: 20px;">标题1 </div> <div style="border-color: Black; background: green; height: 80px;">内容1</div> <div style="background: red; border: 1px; height: 20px;">标题2 </div> <div style="border-color: Black; background: green; height: 80px;">内容2</div> <div> <h3>点击标题1，就隐藏内容1这个div，再点击标题1，又把内容1显示出来</h3> <h3>点击标题2，就隐藏内容2这个div，再点击标题2，又把内容2显示出来</h3> <h3>这里可能不只有2个，如果有N个该如何写CSS样式</h3> </div>
所有回答(3)
0
不要这样写样式。遇到这种情况使用Js比较好处理。定义一个点击方法。方法体的操作就是获取当前div的dispaly属性。并做判断，如果是显示就隐藏，隐藏就修改为显示。这样就好处理了。如果不会的话，那就留言，这个Js应该很简单。就没贴代码
0
我一般用js来控制，你可以参考一下
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="Scripts/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function () { $(".div_title").click(function () { var id = "#div" + this.id; $(id).toggle(); }); }); </script> </head> <body> <div class="div_title" style="cursor:pointer" id="1">标题1</div> <div id="div1" style="display: none; background-color: green">内容1内容1内容1内容1内容1内容1</div> <div class="div_title" style="cursor:pointer" id="2">标题2</div> <div id="div2" style="display: none; background-color: green">内容2内容2内容2内容2内容2内容2</div> <div class="div_title" style="cursor:pointer" id="3">标题3</div> <div id="div3" style="display: none; background-color: green">内容3内容3内容3内容3内容3内容3</div> <div class="div_title" style="cursor:pointer" id="4">标题4</div> <div id="div4" style="display:none; background-color:green">内容4内容4内容4内容4内容4内容4</div> </body> </html>
0
主要是通过display属性来控制。当其值为block，则显示为块状；当其值为none时，则隐藏起来。
