0

我有一个包含的 div。

具有固定标题属性的表。我通过编写 2 个 div 来实现它，第一个 div 包含一个只定义标题的表，下一个 div 包含一个包含所有数据的表。现在为了保持对齐，我给了它们一个固定的宽度。

带有固定标题的表工作正常。

但现在问题来了，我必须通过按钮单击事件来缩小和展开表格。检查我的以下代码是否有帮助。如果有其他方法可以实现这一点，请提出建议。

<input type="button" value="click me" id="abc">

<div id="main-div">
   <div id="header">
     <table class="gradienttable">
       <thead>
         <tr>
             <th style="width:80px;">col 1</th>
             <th style="width:80px;">col 2</th>
             <th style="width:7px;"></th>
         </tr>
       </thead>
     </table>
    </div>
    <div id="data" style="overflow:auto;height:50px;width:200px;">
       <table class="gradienttable" >
         <tbody>
           <tr>
              <td style="width:80px;">data r1c1</td>
              <td style="width:80px;">data r1c2</td>
           </tr>
           <tr>
              <td style="width:80px;">data r2c1</td>
              <td style="width:80px;">data r2c2</td>
           </tr>
           <tr>
              <td style="width:80px;">data r3c1</td>
              <td style="width:80px;">data r3c2</td>
           </tr>
          </tbody>
       </table>
    </div>
</div>

上表是虚拟的，因为我有一大堆 cols。但我基本上是这样做的。只有高度宽度会改变。

我的脚本不起作用：

$(this).ready(function() {
  $('#abc').click(function() {
     $('div#main-div').animate({width:"100px"});
   });
});

请帮我解决这个问题。

提前谢谢。

4

3 回答 3

1

您可以slideToggle在main-div容器上使用：

$('input#abc').on('click', function() {
    $('div#main-div').stop().slideToggle();
})

JSFiddle 示例。

于 2013-03-20T12:27:21.450 回答
0

你可以使用 jquery

$(function(){
    $("#abc").click(function(){
     $('#main').slideToggle('slow');
});
})

将id为main的div的可见性隐藏在css中

于 2013-03-20T12:25:49.843 回答
0

您的代码确实在 jsfiddle 中工作。问题是你的造型。

id 为 main-div 的 div 没有设置为隐藏溢出或显示滚动条（默认情况下它只会显示溢出区域的内容）。

尝试在 main-div 上设置 style="overflow: auto" 然后运行您的代码。

<div id="main-div" style="overflow:auto">
于 2013-03-21T04:44:21.350 回答