2

我有一个有 4 列和 10 行的表，默认情况下隐藏第 4 列。第一行有一个显示/隐藏图像按钮。

我需要的是，当我单击显示/隐藏图像按钮时：

  1. 第 4 列看起来好像从左到右滑入
  2. 一个模态覆盖 div 将出现（如灯箱，阴影箱等），将有一个关闭按钮
  3. 当我关闭模态窗口然后再次单击显示/隐藏图像按钮时，第 4 列应该向左滑出。

我编写的代码对我有用，但它不会从第 3 列向右滑入并在再次单击时滑回。当我单击显示/隐藏按钮时，模态覆盖也不起作用。需要一些帮助来解决这个问题。

这是我的代码：

.subtn{
display:inline-block;
background:url("images/next_right.png") right 0px no-repeat;
width:16px;
height:16px;
}
.subtn.expanded{
background:url("images/previous_left.png") right 0px no-repeat;
width:16px;
height:16px;
}




$(document).ready(function(){
  var $content = $("td:nth-child(4)").hide();
  $(".subtn").on("click", function(e){
    $(this).toggleClass("expanded");
    $content.slideToggle();
  });
});



<table>
<tr>
        <td colspan="4" align="right"><a href="#" rel="lightbox" class="subtn"></a></td>
    </tr>
    <tr>
        <td>1</td>
        <td>sam</td>
        <td>europe</td>
        <td style="display:none;">new</td>
    </tr>
    <tr>
        <td>7</td>
        <td>john</td>
        <td>europe</td>
        <td style="display:none;">new</td>
    </tr>
    <tr>
        <td>4</td>
        <td>bob</td>
        <td>africa</td>
        <td style="display:none;">new</td>
    </tr>

</table>

JS 小提琴链接

4

1 回答 1

1

您提供的代码中没有关于您的模式的任何内容。所以我跳过这部分。在您的第 4 列切换时，问题在于两点：

  1. 动画适用于块元素。TD默认情况下不阻止。所以我在你的css规则中把它改成了display: block；
  2. slideToggle只是滑下来。对于从左到右和向后滑动，您应该使用toggle适当的选项；

在您提供的 jsFiddle 中，没有应该运行切换过程的按钮。我添加了它。Anthing 在这里工作：http: //jsfiddle.net/pEKvq/7/

于 2013-04-30T16:04:59.887 回答