有几家总公司,总公司下有分公司,开始分公司隐藏,点击总公司显示对应分公司,前端实现例子
时间: 2024-04-08 19:33:06 浏览: 14
以下是一个前端实现的示例代码:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>总公司与分公司</title>
<style>
.parent {
cursor: pointer;
}
.sub {
display: none;
}
</style>
</head>
<body>
<table>
<tr>
<td class="parent" onclick="toggleSubs(1)">总公司 1</td>
</tr>
<tr class="sub1 sub">
<td>分公司 1.1</td>
</tr>
<tr class="sub1 sub">
<td>分公司 1.2</td>
</tr>
<tr>
<td class="parent" onclick="toggleSubs(2)">总公司 2</td>
</tr>
<tr class="sub2 sub">
<td>分公司 2.1</td>
</tr>
<tr class="sub2 sub">
<td>分公司 2.2</td>
</tr>
</table>
<script>
function toggleSubs(company) {
var subRows = document.getElementsByClassName('sub' + company);
for (var i = 0; i < subRows.length; i++) {
if (subRows[i].style.display === 'none') {
subRows[i].style.display = '';
} else {
subRows[i].style.display = 'none';
}
}
}
</script>
</body>
</html>
```
在上面的示例中,我们使用了一个带有 `parent` 类的总公司行,并在单击总公司行时调用 `toggleSubs` 函数,并传递了对应的公司编号作为参数。通过设置不同的类名(例如 `sub1`、`sub2`)来标识不同的分公司行,并通过公司编号来进行切换显示和隐藏。
CSS 部分为 `sub` 类设置了 `display: none;`,即一开始将分公司行隐藏起来。在 JavaScript 部分的 `toggleSubs` 函数中,根据传入的公司编号,获取对应的分公司行,并通过切换它们的显示状态来实现显示和隐藏。
这只是一个简单的示例,您可以根据实际需求进行修改和扩展。希望对您有所帮助!如果还有其他问题,请随时提问。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)