点击总公司跳出所有子公司
时间: 2023-08-14 11:51:50 浏览: 77
要实现点击总公司后跳出所有子公司的功能,您可以使用JavaScript和HTML来实现。以下是一个简单的示例代码,展示了如何根据点击事件显示或隐藏子公司列表:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.sub-companies {
display: none;
}
</style>
</head>
<body>
<h2>总公司</h2>
<ul>
<li onclick="toggleSubCompanies()">点击显示/隐藏子公司</li>
</ul>
<ul class="sub-companies">
<li>子公司1</li>
<li>子公司2</li>
<li>子公司3</li>
</ul>
<script>
function toggleSubCompanies() {
var subCompanies = document.getElementsByClassName("sub-companies")[0];
if (subCompanies.style.display === "none") {
subCompanies.style.display = "block"; // 显示子公司
} else {
subCompanies.style.display = "none"; // 隐藏子公司
}
}
</script>
</body>
</html>
```
在这个示例中,我们使用了JavaScript的`onclick`事件来绑定点击事件。当总公司被点击时,`toggleSubCompanies()`函数会被调用。该函数通过获取子公司列表的元素,并根据其当前的显示状态来切换显示或隐藏。
在CSS中,我们将子公司列表的初始显示状态设置为`display: none;`,使其在页面加载时隐藏起来。然后,通过JavaScript中的`toggleSubCompanies()`函数来切换其显示状态。
希望这个示例能帮助您实现所需的功能!
阅读全文