小贝子编程

javascript中的可扩展框



我在对齐四个相邻的div框时遇到了一些问题，或者更正确地说，我已经对齐了两个相邻的"头"框，但我的问题是我将它们用作展开-折叠容器，这些框会损坏第2行的其他可扩展框！因此，当你展开盒子"头1"时，盒子"头4"将向右浮动！

当你展开第一或第二个时，我希望盒子"头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>

您应该看看jQuery accordon。这对你来说会简单得多。而且会让你的html更干净。另外，看看jQuery库，它会大大简化您使用JavaScript的生活。此外，您应该将样式放在css样式表中，这样您的css就会更加"DRY"。

否则，您可以通过以下步骤进行修复：

  1. 用float:left在div中将表二乘二分组
  2. 使所有表为float : left，然后调整边距
  3. 在每个div的第一和第二表之间插入CCD_ 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>
                   <div style="float : left">
                    <table width="300px" border="0" style="float:left;" 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>
                    <div style="clear : both"></div>
                    <table width="300px" border="0" style="float:left;" 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>
              </div>
              <div style="float: left; margin-left:50px;">
                <table width="300px" border="0" style="float:left;" 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>
            <div style="clear: both"></div>
            <table width="300px" border="0" style="float:left" 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>
       </div>
    </body>
    </html>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium