关于JQuery中的下拉框

最新推荐文章于 2022-05-15 22:35:13 发布

北海嶋的dog

最新推荐文章于 2022-05-15 22:35:13 发布

阅读量691

点赞数

本文链接：https://blog.csdn.net/weixin_56927363/article/details/119467082

版权

知识混学记忆技巧 jQuery 下拉菜单内容管理

关键词由CSDN通过智能技术生成

在复习与学习的同时，随着知识的混学，很容易就把一些知识忘记，因此我将内容分享在CSDN平台中，供大家参考，并且为自己日后复习做存储。

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>jquery实现的下拉菜单</title>
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
            .box {
                margin: 0px 30px ;
                width: 120px;
                background-color: rgb(128, 125, 125);
                position: relative;
                height: 26px;
                text-align-last: center;
            }
             .box .item {
                position: absolute;
                display:none;
                left: 0px;
                top: 26px;
                background-color: rgb(175, 180, 184);
                width: 100%;
            }
 
            .box .item a {
                text-decoration: none;
                color: #33393e;
            } 
        </style>
    <script src="./js/jquery-1.11.3.js"></script>
        <script>
            $(function(){
                $('box').click(function(e){
                    $(this).find('.item').toggle();
                });
                $('.box').click(function(e){
                    $(this).find('.item').toggle();
                });
            });
        </script>
    </head>
 
    <body>
        <div class="box">
            <span type="button">按钮</span>
            <dl class="item">
                <dd><a href="">选项1</a></dd>
                <dd><a href="">选项2</a></dd>
                <dd><a href="">选项3</a></dd>
            </dl>
        </div>
    </body>
</html>