0

我认为这是一个简单的修复，但我似乎无法弄清楚。

我有一个包含三个单元格的表格，点击后会显示隐藏的 div。但是，当显示 div 时，它会推动它周围的单元格。我正在寻找一种方式，其中 div 将显示但不限于单元格的大小，并且不会影响它周围的其他单元格。

如果有比在表格中更好的组织方式，请告诉我。

这是我的问题的一些示例代码：

CSS：

<style>
    .iphone {
    display: none;
}
</style>

Javascript/JQuery：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    //Choose iPhone model
    function slideonlyone(thechosenone) {
     $('.model').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).slideDown(200);
          }
          else {
               $(this).slideUp(600);
          }
     });
    }   

        //Choose iPhone carrier
        function slideonlytwo(thechosentwo) {
         $('.carrier').each(function(index) {
              if ($(this).attr("id") == thechosentwo) {
                   $(this).slideDown(200);
              }
              else {
                   $(this).slideUp(600);
              }
         });
        }   
        </script>

HTML：
iPhone 5 

           <div class="model" id="iphone5" style="display: none;padding: 15px;">
              <table width="80%">
                <center>
                <tr>
                  <td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5a');"><img src="_include/images/icons/att.png"></a>
                    <div class="carrier" id="5a" style="display:none;padding:  5px;"> Next Option.</div>
                  </td>
                  <td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5v');"><img src="_include/images/icons/verizon.png"></a>
                    <div class="carrier" id="5v" style="display:none;padding:  5px;"> Next Option.</div>
                  </td>
                  <td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5s');"><img src="_include/images/icons/sprint.png"></a>
                    <div class="carrier" id="5s" style="display:none;padding:  5px;"> Next Option.</div>
                  </td>
                  <td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5f');"><img src="_include/images/icons/tmobile.png"></a>
                    <div class="carrier" id="5f" style="display:none;padding:  5px;"> Next Option.</div>
                  </td>


                </tr>
              </center>
              </table>
           </div>
      </td>

      <td width="33%">
         <div>
            <a id="myHeader" href="javascript:slideonlyone('iphone4s');" ><center><img src="_include/images/products/iphone4s.png">
              <br><b>iPhone 4S</b><center></a></a>
         </div>
         <div class="model" id="iphone4s" style="display: none;padding: 15px;">
            <table width="100%">
              <tr>
                <td width="33%">AT&T</td>
                <td width="33%">Verizon</td>
                <td width="33%">Sprint</td>
                <td width="33%">Factory Unlocked</td>
              </tr>
            </table>
         </div>

      </td>

      <td width="33%">
         <div>
            <a id="myHeader" href="javascript:slideonlyone('iphone4');" ><center><img src="_include/images/products/iphone4.png">
              <br><b>iPhone 4</b><center></a></a>
         </div>
         <div class="model" id="iphone4" href="javascript:slideonlyone('4carrier)" style="display: none;padding: 15px;">
            <table width="100%">
              <tr>
                <td width="33%">AT&T</td>
                <td width="33%">Verizon</td>
                <td width="33%">Sprint</td>
                <td width="33%">Factory Unlocked</td>
              </tr>
            </table>
        </div>
      </td>
   </tr>
</table>
</html>
4

3 回答 3

0

我建议将每个表格单元格中的 div 设置为绝对定位（位置：绝对），并将每个表格单元格设置为（位置：相对）

这将防止 div 弄乱您的表格大小。

在稍微相关的注释中，将您的重复 ID 更改为“类”。 

<td width="33%"><a class="5carrier" href="javascript:slideonlytwo('5a');"><img src="_include/images/icons/att.png"></a>
    <div class="carrier" id="5a" style="display:none;padding:  5px;"> Next Option.</div>
</td>
<td width="33%"><a class="5carrier" href="javascript:slideonlytwo('5v');"><img src="_include/images/icons/verizon.png"></a>
    <div class="carrier" id="5v" style="display:none;padding:  5px;"> Next Option.</div>
</td>
<td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5s');"><img src="_include/images/icons/sprint.png"></a>
<div class="carrier" class="5s" style="display:none;padding:  5px;"> Next Option.</div>
</td>
<td width="33%"><a class="5carrier" href="javascript:slideonlytwo('5f');"><img src="_include/images/icons/tmobile.png"></a>
    <div class="carrier" id="5f" style="display:none;padding:  5px;"> Next Option.</div>
</td>

对于您的 CSS，请尝试：

.carrier {
    position: absolute;
    height: 100; /*or whatever your cell height or desired height is*/
    width: 100%;
}
td {
    position: relative;
}
于 2013-05-18T00:38:27.920 回答
0

我会相对于触发器或您认为最好的任何元素来定位 div 绝对值。绝对定位应该可以解决您的定位问题。您可以使用 CSS 执行此操作，但我会选择 jquery 进行进一步控制。下面是给你一个关于定位的概念性想法。

// get the element to position by. could be row another div or the trigger itself
var offset = $('.element').offset();
// however you grab your div element to slide down this is just to give you an idea.
var modelSlider = ('#id');
// set the offset of your slider.
modelSlider.offset({ left: offset.left, top: offset.top });
modelSlider.show() or whatever you want to do here as to effect.

关键是我不一定只是滑动它，而是根据需要定位。抓住一个父母或一些触发器然后根据它定位你的叠加层是相当微不足道的。您的代码不完整。如果您可以提供/编辑完整的页面，我相信我们可以制作一个确切的示例，因为这应该相当简单。

您可以结帐 => http://api.jquery.com/offset/以获取有关 .offset() 和 .postion() 的更多信息；

于 2013-05-18T00:43:53.103 回答
-1

这是导致该问题的填充和间距。设置cellpadding=0和cellspacing=0。

如果你仍然想保留行和单元格之间的空间，在单元格中添加一个 div，比如，，
<div style="width:275px">然后将动态 div 放入其中，也将修复它。

于 2014-09-04T04:30:28.670 回答