JavaScript之树形菜单

最新推荐文章于 2024-09-13 23:50:28 发布

BreakpointWorld

最新推荐文章于 2024-09-13 23:50:28 发布

阅读量688

点赞数

分类专栏： JavaScript 文章标签： JavaScript display 前端

本文链接：https://blog.csdn.net/BreakpointWorld/article/details/73770354

版权

前端开发中，树形菜单是常见需求。本文介绍了一种JavaScript实现树形菜单的方法，并探讨了display和visibility属性的区别。display:none会使元素不占据空间，而visibility:hidden仅使其不可见但保留空间。

摘要由CSDN通过智能技术生成

在我们的写前端程序的时候，经常会遇到要使用树形菜单或者下拉菜单的地方，这里我写了一个树形菜单。有一个知识点需要了解一下，就是display和visibility的区别。简而言之，将元素的visibility属性设置成hidden之后，元素不可见但是元素所占据的位置依然存在，而将元素display属性设置成none之后，元素不可见并且不占据任何位置。现在网页为了在一定的空间里显示更多的信息一般使用的是display属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        ul{
            list-style: none;
            width: 150px;
            margin: 0px;
            padding: 0px;
            display: none;
        }

        ul li{
            margin-top: 10px;
            padding: 15px 20px;
            background-color: chocolate;
        }
    </style>
</head>
<body>
<a id="car" href="javascript:show('carlist')">汽车</a>
<ul id="carlist">
    <li>宝马</li>
    <li>奔驰</li>