html - 为表中的所有 td 重复使用下拉列表
问题描述
我有一个 p 表,其中最后一列包含三个打开下拉菜单的点。下拉菜单位置是固定的,不适合每一行的 td 元素的位置。
HTML 代码:
<td width="80" class="grp-list">
<a (click)="myFunction()">
<div class="test">
<div id="myDropdown" class="dropdown-content">
<a >Home</a>
<a >About</a>
<a >Contact</a>
</div>
</div>
CSS 文件:
.test:after {
content: '\2807';
font-size: 20px;
//position: relative;
}
.grp-list{
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-family: SFR;
}
.show {
display: block;
position: absolute;
margin-left: 10px;
margin-top: 10px;
}
}
ts文件:
myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
解决方案
如果您想重用该 css,您可以使用 scss 创建一个Mixin,它允许您重用它。
或者,您可以使该组件具有与您在那里拥有的相同 css 的内容输入。
推荐阅读
- angular - 角度解析器,组件中的对象未准备好
- css - 覆盖从 AdBlock 注入的 CSS
- reporting-services - SSRS 图表标题 - 更改部分标题的字体大小
- reactjs - React router v4 - 匹配对象的错误内容
- variables - Anylogic:如何将单选按钮链接到 double 类型的变量?
- php - PHP Codeigniter 表单验证(数量)
- android - Android Studio 组件未显示且应用未运行
- python - 如何使用 python 处理 Hadoop 中的图像?
- css - 悬停效果上的角剑道网格行
- java - 从堆栈跟踪输出中获取“logcat like”