菜单栏

最新推荐文章于 2024-01-23 19:38:03 发布

木槿晞

最新推荐文章于 2024-01-23 19:38:03 发布

阅读量651

点赞数

分类专栏：课程文章标签： html5 javascript

本文链接：https://blog.csdn.net/xyw_jzj5201314/article/details/109588917

版权

课程专栏收录该内容

21 篇文章 0 订阅

订阅专栏

菜单栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .menu {
            cursor: pointer;
        }
    </style>
    <script>
        function dian(thisa) {
            nextNode = thisa.nextElementSibling;
            if (nextNode.style.display == 'none') {
                nextNode.style.display = 'block';
            } else {
                nextNode.style.display = 'none';
            }
        }
    </script>
</head>

<body>
    <ul>
        <li class='menu' onclick='dian(this)'>导航一</li>
        <li style='display:none;'>
            <a href='JavaScript:void();'>菜单1</a><br/>
            <a href='JavaScript:void();'>菜单2</a><br/>
            <a href='JavaScript:void();'>菜单3</a><br/>
            <a href='JavaScript:void();'>菜单4</a><br/>
            <a href='JavaScript:void();'>菜单5</a><br/>
        </li>
        <li class='menu' onclick='dian(this)'>导航二</li>
        <li style='display:none;'>
            <a href='JavaScript:void();'>菜单6</a><br/>
            <a href='JavaScript:void();'>菜单7</a><br/>
            <a href='JavaScript:void();'>菜单8</a><br/>
            <a href='JavaScript:void();'>菜单9</a><br/>
            <a href='JavaScript:void();'>菜单10</a><br/>
        </li>
        <li class='menu' onclick='dian(this)'>导航三</li>
        <li style='display:none;'>
            <a href='JavaScript:void();'>菜单11</a><br/>
            <a href='JavaScript:void();'>菜单12</a><br/>
            <a href='JavaScript:void();'>菜单13<a><br/>
            <a href='JavaScript:void();'>菜单14</a><br/>
            <a href='JavaScript:void();'>菜单15</a>
        </li>
    </ul>
</body>

</html>

在这里插入图片描述

木槿晞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
菜单栏

菜单栏<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .menu {
复制链接

扫一扫