jQuery特效-点击弹出框或者下拉菜单

代码2015-03-112,931 人已阅来源:网络

点击弹出框jQuery特效。具体效果是:点击按钮,会弹出框;再次点击,弹出框就会关闭。点击弹出框内区域是不会关闭的,点击其它地方就会关闭的。

这是一个不可多得的jQquery特效,速速收藏!

运行代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击弹出框jQuery特效 - www.tonjay.com</title>
    <script src="https://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(document).click(function () {
                $('.popup-layer').hide();
                $('.btn-headermenu').removeClass('btn-active');
            })
            $('.btn-headermenu,.popup-layer').click(function (event) {
                event.stopPropagation();
            })//tonjay.com
            $('.btn-headermenu').each(function () {
                $(this).click(function () {
                    $(this).toggleClass('btn-active');
                    $(this).next().toggle();
                    $(this).next().next().toggle();//web前端资源网 www.tonjay.com
                    $(this).parent().siblings().find('.popup-layer,.btn-headermenu').hide();
                })
            })
        })
    </script>
</head>
<style type="text/css">
    body {padding:0;margin:0;background:#ddd;font-family:Microsoft Yahei;font-size:12px;}
    .bar {background:#333;height:40px;line-height:40px;position:relative;}
    .btn-headermenu {width:100px;height:40px;text-align:center;color:#fff;line-height:40px;font-size:12px;text-decoration:none;display:block;}
    .btn-headermenu:hover {background:#ddd;color:#333;}
    .btn-active,.btn-active:hover {background:#fff;color:#333;border-bottom:none;position:relative;}
    .popup-layer {height:200px;width:300px;padding:10px;background:#fff;position:absolute;left:0;top:40px;box-shadow:5px 5px 5px #ccc;}
</style>
<body>
    <div class="bar"> <a class="btn-headermenu" href="javascript:;">注册/Login</a>
        <div class="popup-layer" style="display: none;">
            <h1>点击弹出框jQuery特效</h1>
            点击弹出框内,是不会关闭的,点击其它地方就会关闭的
        </div>
    </div>
</body>
</html>