Question

在我目前的Ruby on Rails应用程序中，我试图在每个表上创建一个下拉函数，以显示来自数据库的服务器的高级详细信息。我的完成过程是将隐藏行默认为display：none;然后在单击查看它时查看它，然后在再次单击时隐藏它。这是我的javascript：

Tools → Clojure

然后我的css：

var hideDetails, showDetails;
showDetails = function() {
  $(this).closest('tbody').addClass('viewing');
  return false;
};
hideDetails = function() {
  $(this).closest('tbody').removeClass('viewing');
  return false;
};


$table.on('click', 'tbody.viewing', hideDetails);
$table.on('click', '.details-link', showDetails);

最后，我的HTML代码：

table.collapsible {
    // css for drop-down
    #hiddenRow.details {
      display: none;
      tbody.viewing {
          #hiddenRow.details {
            display: table-row;
          }
      }
    }
  }

我的问题是，即使在我的CSS中，我将隐藏行的默认显示为无，它仍然显示在屏幕上。以及按钮功能不佳。一些帮助将不胜感激。

注意：我的HTML代码中有一些额外的东西，因为我的表有一些其他函数，比如我们可以排序的列，只是忽略它，它与我的问题没有关系。

Answer 1

你写css的方式是错误的。在编译时，它将以此声明结束：

table.collapsible #hiddenRow.details{
  display: none;
}

table.collapsible #hiddenRow.details tbody.viewing #hiddenRow.details{
  display: table-row;
}

所以第一个声明（table.collapsible＃hiddenRow.details）什么也找不到，因为没有在id为hiddenRow的tr上设置类.details。

第二个声明也没有任何结果，因为显而易见的选择器很奇怪。

你可以使用这个css：

table.collapsible {
    #hiddenRow {
      display: none;
    }
    tbody.viewing {
      #hiddenRow {
        display: table-row;
      }
    }
}

此外，您应避免将<tr>标记放在另一个<tr>标记内。您应该使用<a>或<button>标记代替<input>（因为您已将某个html上的事件绑定“点击”，因此不需要onclick属性。）

如何添加和删除一个类来隐藏和显示表格行？

1 个答案: