jQuery - 制作点击显示二级菜单效果

时间：2021-05-08 17:16:26
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>制作子菜单</title>

    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">

        $(function(){

            $("h2").click(function(){

                $(this).next("ul").css("display","block").addClass("nav");

                $($("li")[0]).css("background-color","#ccc");

            });

        })

    </script>

    <style type="text/css">

        .nav li{

            font-size:14px;

            font-weight:bold;

            line-height: 24px;

        }

    </style>

</head>

<body>

<h2>新手指南</h2>

<ul style='display:none'>

    <li><a href="#">会员注册</a></li>

    <li><a href="#">订阅更新</a></li>

    <li><a href="#">用户协议</a></li>

    <li><a href="#">常见问题</a></li>

</ul>

</body>

</html>

制作点击显示二级菜单效果.html

相关文章