javascript学习-菜单的折叠与选中高亮显示

最新推荐文章于 2021-03-27 13:54:00 发布

The_mini_dog

最新推荐文章于 2021-03-27 13:54:00 发布

阅读量465

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/The_mini_dog/article/details/88130170

版权

简述：

本来想着自己用 javascript 写一个类似 jquery 里 slideDown 和 slideUp 的效果，于是就弄了 setTimeout 定时器写了，后面才发现各种问题暴露，哈哈哈。现在代码还有一个鼠标多次点击菜单会奔溃的问题没有改回来，如果想深入研究的话可以看看这篇文章，写的很详细了（因为小编也是参照这篇文章学习的）

样式演示

在这里插入图片描述

1、简单的 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单折叠与展开</title>
    <style type="text/css">

        .down{
    
            margin: 0 auto;
            width: 300px;
        }

        ul ,h5 {
    
            padding: 0;
            margin: 0;
        }
        .lis{
    
            margin-bottom: 10px;
            width: 300px;
            border: 1px solid #dddd;
            list-style: none;
        }
        h5{
    
            width: 300px;
            line-height: 30px;
            text-align: center;
            background-color: #dddd;
        }
        .down ul li {
    
            padding: 10px;
            list-style: none;
            text-indent: 24px;
            border-bottom: 1px dashed #6666;
        }

        .down ul{
    
            display: none;
            overflow: hidden;
        }

    </style>
    <script type="text/javascript" src="menu.js"></script>
</head>
<body>
    <ul class="down">
        <li class="lis">
            <h5>广东省</h5>
            <ul>
                <li>广州市</li>
                <li>深圳市</li>
                <li>佛山市</li>

最低0.47元/天解锁文章

The_mini_dog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习-菜单的折叠与选中高亮显示

简述：本来想着自己用 javascript 写一个类似 jquery 里 slideDown 和 slideUp 的效果，于是就弄了 setTimeout 定时器写了，后面才发现各种问题暴露，哈哈哈。现在代码还有一个鼠标多次点击菜单会奔溃的问题没有改回来，如果想深入研究的话可以看看这篇文章，写的很详细了（因为小编也是参照这篇文章学习的）样式演示1、简单的 HTML&lt;!DOCTYPE...
复制链接

扫一扫