我有两个按钮,Edit_1和Edit_2。通过单击它们中的每一个,“扩展”div应出现在单击按钮的正下方。
在我编写的函数中,如果在edit_1下“扩展”div的显示属性为“阻止”,并且单击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';
}
答案 0 :(得分:2)
您可能会发现使用良好切换效果的JSFiddle非常有用。
JQuery是:
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#content').toggle('show');
});
});
我很确定你可以在你的项目中使用它:)
看看this one - 它没有使用JQuery,应该适合你:)
找到了here:
另一种方法
this演示也是另一种在媒体上显示/隐藏div的方式。所以有很多可供选择的选项! :)
<script>
function showhide()
{
var div = document.getElementById("newpost");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>