小编Tra*_*Coy的帖子

通过单击Materialisecss/Material Design中的图标可扩展搜索栏

使用Materializecss处理布局,在我的标题/导航中,我需要显示一个搜索图标,单击该图标时会展开搜索栏.

理想情况下,我希望它只是接管整个标题/ topnav,但任何扩展/到搜索栏的东西都很好.

除了提及基本代码之外,文档(http://materializecss.com/navbar.html)没有详细说明搜索栏:

  <nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" required>
          <label for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
  </nav>
Run Code Online (Sandbox Code Playgroud)

怎么办呢?在Materialisecss/Material Design中我是否有一种标准方法可以做到这一点我不知道?

非常感谢

javascript jquery materialize material-design

5
推荐指数
1
解决办法
3148
查看次数

无论显示如何,“奇数”或“偶数”行的背景:无

我正在尝试为我的表格行添加“斑马”颜色(奇数=深色,偶数=浅色)。但是,由于我的应用程序,用户可以使用选择器隐藏行,因此不会产生斑马效果,因为伪选择器选择了所有内容,而不是基于“可见”内容。

这并不是什么新鲜事,之前已经讨论过很多次了:

选择奇偶子项,排除隐藏子项

使用 CSS3 对带有隐藏行的表格进行 Zebra 条带化?

在同一张表中,我使用 CSS 的“计数”功能,以明显地显示每行的行号,并且这些仅应用于可见行(丢弃带有 display:none 的行)

table {
  width: 100%;
  background: white;
  counter-reset: rowNumber;
}

tr > td {counter-increment: rowNumber;}
tr td::before {
	content: counter(rowNumber);
	color: blue;
}

tr:nth-child(even) {
  background: red;
}
Run Code Online (Sandbox Code Playgroud)
<table>
	<tr>
		<td></td>
	</tr>
	<tr>
		<td></td>
	</tr>
	<tr>
		<td></td>
	</tr>
	<tr>
		<td></td>
	</tr>
	<tr>
		<td></td>
	</tr>
	<tr style="display:none;">
		<td></td>
	</tr>
  <tr>
		<td></td>
	</tr>
  <tr>
		<td></td>
	</tr>
  <tr style="display:none;">
		<td></td>
	</tr>
  <tr>
		<td></td>
	</tr>
</table>
Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/cr6yo00w/1/

我的问题是(没有在任何地方看到过这个问题):

有没有办法将两者结合起来并以这种方式为我的桌子设置斑马色?是否可以从计数中提取偶数/奇数?

编辑:这被标记为欺骗——正如我自己已经说过的,奇数/偶数选择器之前已经讨论过。我的问题特别涉及将奇数/偶数选择器与 CSS …

css html-table

5
推荐指数
0
解决办法
789
查看次数