javascript - javascriptの拡張可能なボックス

Question

4つのdivボックスを並べて配置するのに問題があります。より正確には、2つの「ヘッド」ボックスを並べて配置しましたが、問題は、それらを展開折りたたみコンテナとそれらのボックスとして使用していることです。 2行目の他の拡張可能なボックスにダメージを与えます！したがって、ボックス「ヘッド1」を展開すると、ボックス「ヘッド4」が右に浮きます。

ボックス1または2を展開するときに、ボックス「ヘッド4」とボックス「ヘッド3」を左右に浮かせるのではなく、下に移動させたい

みんなが私にもこれを実行して、何が起こっているのかを簡単に確認できるようにするように頼みました。次回コードを減らすことに気づいて申し訳ありません。デモを実行しているボックスは次のとおりです。

それぞれを展開しようとするだけでチェックボックスをオンにでき、問題は非常に明確になります

そしてこれが私が参照として問題を抱えている私のコードです：

    <html>
    <head>
    <TITLE>Expandable and collapsible table - demo</TITLE>
    <script type="text/javascript">
    function toggle_visibility(tbid,lnkid)
    {
    var obj = document.getElementsByTagName("table");
    for(i=0;i<obj.length;i++)
    {
    if(obj[i].id && obj[i].id != tbid)
    {
     document.getElementById(obj[i].id).style.display = "none";
    x = obj[i].id.substring(3);
    document.getElementById("lnk"+x).value = "[+] Expand";
    }
    }
    if(document.all){document.getElementById(tbid).style.display =              document.getElementById(tbid).style.display == "block" ? "none" : "block";}
   else{document.getElementById(tbid).style.display =     `document.getElementById(tbid).style.display == "table" ? "none" : "table";}`
  document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-]        Collapse" ? "[+] Expand" : "[-] Collapse";
     }
    </script>
    <style type="text/css">
#tbl1,#tbl1 {display:none; text-transform: uppercase;}
#tbl2,#tbl2 {display:none; text-transform: uppercase;}
#tbl3,#tbl3 {display:none; text-transform: uppercase;}
#tbl4,#tbl4 {display:none; text-transform: uppercase;}
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
    </style>
    </head>

    <body>
 <table width="300px" border="0" style="float:left; margin-left:300px" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="50">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 1</strong>        </font></td>
   <td bgcolor="#4682B4" align="center" width="50%"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
    </tr>
    <tr>
    <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl1">
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div>    </table>
     </td>
    </tr>
    </table>

    <table width="300px" border="0" style="float:right; margin-right:300px" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="50">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 2</strong>   </font></td>
   <td width="50%" bgcolor="#4682B4" align="center"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
  </tr>
    <tr>
    <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl2">
     <tr>
     <td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
   </tr>
   </td>
 </table>


    <table width="300px" border="0" style="float:right; margin-right:300px" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="50">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 3</strong>  </font></td>
   <td width="50%" bgcolor="#4682B4" align="center"><input id="lnk3" type="button" value="[+] Expand" onclick="toggle_visibility('tbl3','lnk3');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl3">
     <tr>
  <td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
   </tr>
   </td>
 </table>

    <table width="300px" border="0" style="float:left; margin-left:300px" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="50">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 4</strong></font></td>
   <td width="50%" bgcolor="#4682B4" align="center"><input id="lnk4" type="button" value="[+] Expand" onclick="toggle_visibility('tbl4','lnk4');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl4">
     <tr>
  <td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
   </tr>
   </td>
 </table>
</body>
</html>

javascript - javascriptの拡張可能なボックス

1 に答える 1

Related

Reference