js下拉菜单

最新推荐文章于 2022-05-07 22:57:39 发布

kelokole

最新推荐文章于 2022-05-07 22:57:39 发布

阅读量93

点赞数

本文链接：https://blog.csdn.net/qq_44254672/article/details/91840283

版权

<!DOCTYPE HTML>
<html>
    <head>
        <title>表下拉菜单</title>
        <mate charset="utf-8" />
        <style type="text/css">
        *{ padding: 0px; margin: 0px; text-align: center; }
        .bpp1{ width: 80px; margin: 30px auto; }
        .all_dd dd{ display: none; }
        .bpp1 dt, .all_dd dd{ width: 80px; height: 35px; margin-bottom: 1px; line-height: 35px;  border-radius: 5px 5px 5px 5px; color: #ffffff; }
        .bpp1 dt{ background: #12ebb5; cursor: pointer; }
        .all_dd dd{ float: top; background: chartreuse; cursor: pointer; }
        .all_dd dd.current, .all_dd dd.active{ background: rgb(114, 233, 2); color: #ffffff; }
        </style>
        <script src="../../jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div class="bpp1">
            <dl>
                <dt>游客</dt>
                <div class="all_dd"></div>
            </dl>
        </div>

        <script type="text/javascript">
            var roles = ["站长", "管理员", "用户", "游客", "坏蛋"];
            var judge = false;
            $(document).ready(function(){
                for(var i in roles){
                    $(".all_dd").append("<dd>" + roles[i] + "</dd>");
                }
                $(".bpp1 dt").click(function(){
                    if(!judge){
                        $(".all_dd dd").css("display", "block");
                    }else{
                        $(".all_dd dd").css("display", "none");
                    }
                    judge = !judge;
                    $(".all_dd dd").hover(function(){
                        $(this).addClass("current");
                    },function(){
                        $(this).removeClass("current");
                    });
                    $(".all_dd dd").click(function(){
                        $(".bpp1 dt").text($(this).text());
                        $(this).removeClass("current");
                        for(var i in roles){
                            $(".all_dd dd").removeClass("active").css("display", "none");
                        }
                        $(this).addClass("active");
                        judge = false;
                    });
                });
                
            });
        </script>
    </body>
</html>

效果图：