Question

在Jsfiddle上，它不能用作我的本地机器。

在本地计算机上，唯一的一点是，当点击“突出显示”时，它会显示所有更多＆＃39;一次走的行是不对的。甚至尝试过＆＃39; .next（＆＃39; more＆＃39;）但它似乎没有奏效。

应该是什么：隐藏更多＆＃39;直到＆＃39;突出显示＆＃39;单击行，然后展开自己的“更多”行。行。如果其他突出显示＆＃39;单击行，上一个展开的行应该关闭，当前展开的行显示。

HTML

<table>
<tbody>
  <tr class="highlight">
    <td>
Test 1 
    </td>
    <td>
      Test 2
    </td>
    <td>Test 3</td>
    <td>Test4</td>
  </tr>
  <tr>
    <td colspan="4" class="more" style="border-top:1px solid red">
      test test

    </td>
  </tr>
      <tr class="highlight">
    <td>
Test 1 
    </td>
    <td>
      Test 2
    </td>
    <td>Test 3</td>
    <td>Test4</td>
  </tr>
  <tr>
    <td colspan="4" class="more" style="border-top:1px solid red">
      test test

    </td>
  </tr>


</tbody>
</table>

JQuery的

$(".highlight").each(function(e){

    $(this).click(function(e){

      if($('.more').hasClass('block')){
        $('.more').removeClass('block');
        alert('removed');
      }
      else{
        $('.more').addClass('block');
      }
    });
});

CSS

.more{display:none;}
.block(display:block!important}

帮助表示赞赏。

Answer 1

首先，你需要在你的小提琴中加入jQuery。然后，您的CSS中出现语法错误。

.block {
    display: block !important;
}

Demo

那就是说，你的代码可能会简单得多：

$(".highlight").click(function() {
    $(this).next('tr.more').toggle();
    $('tr.more').not( $(this).next() ).hide();
});

Demo

请注意，我已将.more类移至行元素。

单击时，tr应显示自己的展开行

1 个答案: