我有5种类型,每种类型下面有3个子项,每个子项占1行,这3个子项每个对应一个超链接,我想要在最开始时只显示5种类型,当点击其中某个类型时,再展开显示该类型的3个子项,不点击的类型不显示子项,如何撰写HTML代码
时间: 2024-09-26 21:02:26 浏览: 21
你可以使用HTML的`<ul>`元素结合CSS的`display`属性来实现这个需求。这里是一个基本的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
/* 初始化时隐藏所有子项 */
li ul {
display: none;
}
/* 点击父级时显示子项 */
li:hover > ul {
display: block;
}
</style>
</head>
<body>
<ul>
<!-- 类型1 -->
<li><a href="#">类型1</a>
<ul>
<li><a href="#">子项1</a></li>
<li><a href="#">子项2</a></li>
<li><a href="#">子项3</a></li>
</ul>
</li>
<!-- 类型2, 类型3到类型5类似,只需复制并替换内容 -->
<li><a href="#">类型2</a>
<ul>
<li><a href="#">子项1</a></li>
<li><a href="#">子项2</a></li>
<li><a href="#">子项3</a></li>
</ul>
</li>
<!-- 类型5的子项 -->
</ul>
</body>
</html>
```
在这个例子中,每个类型是一个`<li>`标签,包含一个超链接和一个嵌套的`<ul>`用于存放子项。默认情况下,所有子项的`<ul>`都设置为`display: none`,当鼠标悬停在父级上时(`li:hover`),对应的子项会显示出来。
阅读全文