点击页面其他地方，隐藏DIV（常用）

最新推荐文章于 2021-06-03 08:59:41 发布

最骚的就是你

最新推荐文章于 2021-06-03 08:59:41 发布

阅读量1.4k

点赞数

分类专栏： web前端学习

本文链接：https://blog.csdn.net/libin_1/article/details/51396203

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <title>Document</title>
        <script type="text/javascript">
            $(function() {
                        function stopFunc(e) {
                            e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
                        }
                        document.onclick = function(e) {
                            $(".options").css('display', 'none');
                        }
                        $(".more").click(function(e) {
                            $(".options").css('display', 'block');
                            e = e || event;
                            stopFunc(e);
                        })
                        $(".options").click(function(e) {
                            e = e || event;
                            stopFunc(e);
                        })
                })
        </script>
        <style type="text/css">
            .more {
                text-decoration: none;
            }

            .options {
                position: absolute;
                display: none;
                left: 10px;
                top: 46px;
                background: #fff;
                width: 128px;
                border: red solid 1px;
                box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
            }

            .options a {
                display: block;
                line-height: 24px;
                height: 24px;
                padding-left: 10px;
                color: #666;
                text-decoration: none;
            }
            .options a:hover {
                background: red;
            }
        </style>
    </head>

    <body>
        <div id="main" style="position: relative;">
            <a href="javascript:void(0)" target="_blank" class="more">更多</a>
            <div class="options">
                <a href="/ar">العربية</a>
                <a href="/de">Deutsch</a>
                <a href="/es">Español</a>
                <a href="/fa">فارسی</a>
                <a href="/fr">Français</a>
                <a href="/he">עברית</a>
                <a href="/hi">हिन्दी</a>
                <a href="/it">Italiano</a>
                <a href="/ja">日本語</a>
                <a href="/nl">Nederlands</a>
                <a href="/pl">Polski</a>
                <a href="/pt">Português</a>
                <a href="/ro">Română</a>
                <a href="/ru">Русский</a>
                <a href="/th">ภาษาไทย</a>
                <a href="/tr">Türkçe</a>
                <a href="/zh">繁體中文</a>
                <a href="/en">English</a>
            </div>
        </div>

    </body>

</html>

最骚的就是你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击页面其他地方，隐藏DIV（常用）

<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <title>Document</title> <scr
复制链接

扫一扫