Question

我有一个表格，其中包含我想要在行上单击的行数，然后向下滑动隐藏的行。问题是我在每行下面都有一些空的空间。有没有办法删除这个空白空间并只在每一行点击时添加它？这是我的代码段：

var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"top": 0});
    }
    else
    {
        clicked=true;
        $(".two").css({"top": "-25px"});
    }
});

.one {
    position: relative;
    top: 0;
    background-color: lightblue;
    z-index: 1;
    cursor:pointer;
}
.two {
    position: relative;
    top: -25px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="0" style="border:1px solid #000;">
<tr class="one"> <td>HELLO WORLD</td></tr>
<tr class="two"><td>THIS IS HIDE TEXT</td></tr>
<tr class="one"> <td>HELLO WORLD</td></tr>
<tr class="two"><td>THIS IS HIDE TEXT</td></tr>
</table>

Answer 1

只需用以下内容替换所有javascript：

$(".one").on('click', function(){
    $(this).next().toggle();
});

为您的javascript部分：https://jsfiddle.net/1p8wut0k/1/

.next()找到直接的兄弟

.toggle()从hide / show（天生就知道）改变它。您还可以通过在其中添加数字来添加轻微的淡入淡出效果。

Answer 2

您始终可以使用弹性框布局。这是一种对你的问题设置显示的一种hackish解决方案：在桌面上展开并显示：tr上的块。现在转换高度是np ...

编辑：更新了代码，分别用于每一行

$(".one").on('click', function() {
  if ($(this).next().height()==0) {
    clicked = false;
    $(this).next().css({
      "top": 0,
      "height": "25px"
    });
  } else {
    clicked = true;
    $(this).next().css({
      "top": "-25px",
      "height": "0"
    });
  }
});

table {
  display: flex;
}
tr {
  display: block
}
.one {
  position: relative;
  top: 0;
  background-color: lightblue;
}
.two {
  height:0;
  overflow: hidden;
  position: relative;
  top: -25px;
  background-color: yellow;
  z-index: -1;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: allt 1s;
  transition: all 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="0" style="border:1px solid #000;">
  <tr class="one">
    <td>HELLO WORLD</td>
  </tr>
  <tr class="two">
    <td>THIS IS HIDE TEXT</td>
  </tr>
  <tr class="one">
    <td>HELLO WORLD</td>
  </tr>
  <tr class="two">
    <td>THIS IS HIDE TEXT</td>
  </tr>
</table>

单击行时表的高度会发生变化

2 个答案: