0
我有两个按钮,Edit_1和Edit_2。通过点击它们中的每一个,一个“扩展”div应该出现在被点击的按钮的正下方。正确算法的按钮切换
在我写,如果“扩张” div的显示属性是“块”下edit_1和一个点击edit_2,寡妇将下edit_2移位的功能。但是如果我点击edit_1本身,'扩展'窗口不会消失。
我可以很容易地通过增加另一个“扩展”窗口解决问题,但随着“编辑”标签会增加,我需要正确地移动这其中的“一”扩展窗口。如果您对此有所帮助,我将不胜感激。
HTML:
<div id="container">
<div id="section_1"></div>
<div id="section_2"></div>
<button id="edit_1" onClick="edit(1);"></button>
<button id="edit_2" onClick="edit(2);"></button>
<div id="expansion"></div>
</div>
CSS:
*{
margin:0px;
padding:0px;}
body {
width:100%;
background-color:#F4F4F2;
margin-top:15px;
font-family:verdana;}
#container{
width:820px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border: dashed 2px blue;
position:relative;
z-index:1;}
#section_1{
width:800px;
height:198px;
border-top: solid 2px #D24726;
background-color:#ffcccc;
top:0px;
position: absolute;
z-index:2;}
#section_2{
width:800px;
height:198px;
border-top: solid 2px #14826D;
background-color:#C1FBDE;
top:200px;
position: absolute;
z-index:2;}
#edit_1{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:15px;
border:none;
cursor:pointer;
z-index:4;
background:url(../images/edit.fw.png) no-repeat;}
#edit_2{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:215px;
border:none;
cursor:pointer;
z-index:4;
background:url(../images/edit.fw.png) no-repeat;}
#expansion{
width:200px;
height:120px;
background-color:#FFFFFF;
position:absolute;
z-index:3;
margin-left:600px;
top:0px;
padding-top: 40px;
padding-left:10px;
padding-right:10px;
border-top:solid 2px #D24726;
display:none;}
的javascript:
function edit(clicked_edit){
var click=document.getElementById('expansion').style.display;
if (click=='block'){ /* in any case, if the display property is block, it turns it to none*/
document.getElementById('expansion').style.display='none';
}
var tp=document.getElementById('section_'+clicked_edit).offsetTop;
document.getElementById('expansion').style.top=tp+'px';
document.getElementById('expansion').style.display='block';
}
@ MrCoder - 谢谢你这么多,但不能使用jquery在这个项目 – SRYZDN 2014-10-09 12:20:18
@HNML请看到我的编辑 – 2014-10-09 12:29:15
@ MrCoder - 谢谢你,是的,它是不是有其他两个编辑按钮没用... – SRYZDN 2014-10-09 13:14:18