正確算法的按鈕切換

Question

我有兩個按鈕，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'; 
    } 

JSFiddle

Answer 1

---

JQuery的方法

---

你可能會發現大量使用望着這JSFiddle使用一個很好的切換效果。

JQuery的是：

jQuery(document).ready(function(){ 
    jQuery('#hideshow').live('click', function(event) {   
     jQuery('#content').toggle('show'); 
    }); 
}); 

我敢肯定，你可以使用這個在您的項目:)

---

JavaScript方式

---

看一看在this one - 它不使用JQuery，應該適合你:)

發現here：

---

另一種方法

---

this演示也顯示/隱藏DIV印刷機上的另一種方式，所以有選項可供選擇pleanty。 ！ :)

<script> 
    function showhide() 
    { 
      var div = document.getElementById("newpost"); 
    if (div.style.display !== "none") { 
     div.style.display = "none"; 
    } 
    else { 
     div.style.display = "block"; 
    } 
    } 
    </script>