jQuery实现菜单点击隐藏（上下左右）

kevin-ying · 发表于 2015-9-5 14:51:27

[HTML] 纯文本查看 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery实现菜单点击隐藏</title>
    <script type="text/javascript" src="http://www.kevin-ying.com/jq/jquery-1.9.1.min.js"></script>
    <script>
    $(document).ready(function () {
        //eg.1
        $('#menu-1').menuToggle({
            'ctrlBtn':'ctrl-btn-1',
            'speed':400,
            'width':400,
        });
        //eg.2
        $('#menu-2').menuToggle({
            'ctrlBtn':'ctrl-btn-2',
            'speed':300,
            'width':400,
            'openText':'<<展开',
            'closeText':'关闭>>',
        });
        //eg.3
        $('#menu-3').menuToggle({
            'ctrlBtn':'ctrl-btn-3',
            'speed':300,
            'height':400,
            'openText':'向下展开',
            'closeText':'关闭',
            'type':'height',
        });
        
        //eg.4
        $('#menu-4').menuToggle({
            'ctrlBtn':'ctrl-btn-4',
            'speed':300,
            'height':400,
            'openText':'向上展开',
            'closeText':'关闭',
            'type':'height',
        });
    });
    (function($){
        $.fn.extend({'menuToggle':
            function(options){
                //self变量，用于函数内部调用插件参数
                var self = this;
                //默认参数
                this._default = {
                    'ctrlBtn':null,            //关闭&展开按钮id
                    'speed':400,            //展开速度
                    'width':400,            //展开菜单宽度
                    'height':400,            //展开菜单高度
                    'openText':'展开>>',    //展开前文本
                    'closeText':'<<关闭',    //展开后文本
                    'type':'width'            //width表示按宽度伸展，height表示按高度伸展
                };
                //插件初始化函数
                this.init = function(options){
                    //配置参数格式有误则提示并返回
                    if(typeof options != 'object') {
                        self.error('Options is not object Error!');
                        return false;
                    }
                    if(typeof options.ctrlBtn == 'undefined') {
                        self.error('Options ctrlBtn should not be empty!');
                        return false;
                    }
                    //存储自定义参数
                    self._default.ctrlBtn = options.ctrlBtn;
                    if(typeof options.type != 'undefined')         self._default.type = options.type;
                    if(typeof options.width != 'undefined')     self._default.width = options.width;
                    if(typeof options.height != 'undefined')     self._default.height = options.height;
                    if(typeof options.speed != 'undefined')     self._default.speed = options.speed;
                    if(typeof options.openText != 'undefined')     self._default.openText = options.openText;
                    if(typeof options.closeText != 'undefined') self._default.closeText = options.closeText;
                    if(self._default.type == 'width') {
                        self._default.expandOpen     = {width: self._default.width};
                        self._default.expandClose     = {width: 0};
                    }else {
                        self._default.expandOpen     = {height: self._default.height};
                        self._default.expandClose     = {height: 0};
                    }
                };
                this.run = function(){
                    $("#"+self._default.ctrlBtn).click(function () {
                        if($(this).hasClass('closed')){        //有closed类，表示已关闭，现在展开
                            $(this).removeClass('closed').html(self._default.closeText);
                            $(self).show().animate(self._default.expandOpen, self._default.speed);
                        }else {
                            $(this).addClass('closed').html(self._default.openText);
                            $(self).animate(self._default.expandClose, self._default.speed,function(){
                                $(this).hide();
                            });
                        }
                    });
                };
                this.error = function(msg){
                    //没有错误提示DIV则自动添加
                    if(!$("#menuToggleErrorTips").size()){
                        $("<div id='menuToggleErrorTips'><h2>Error</h2><div class='tips'></div></div>").appendTo($("body")).hide();
                        $("#menuToggleErrorTips").css({
                            position:'absolute',
                            left: $("body").width()/3,
                            top: 100,
                            width:400,
                            height:200,
                            'z-index': 9999999,
                            'border': '1px solid #000',
                            'background-color': '#ABC',
                            'color': '#CC0000',
                            'text-align': 'center'
                        });
                    }
                    //显示错误提示信息
                    $("#menuToggleErrorTips").show().children('.tips').html(msg);
                }
                //Init
                this.init(options);
                this.run();
            }
        });
    })(jQuery);
    </script>
    <style type="text/css">
    /* 公用 */
    .hide-menu
    {
        width:0;
        height:300px;
        border:1px solid #333333;
        background-color:#777788;
        text-align:center;
        line-height:400%;
        font-size:13px;
        left:0;
        top:100px;
        float:left;
        display:none;
    }
    .ctrl-btn{
        border: 1px solid;
        float: left;
        padding: 10px;
        position: relative;
        top: 100px;
        cursor:pointer;
    }
    /* 菜单2 */
    #menu-2{
        width:400px;
        top:100px;
        right:0;
        float:right;
        display:block;
    }
    #ctrl-btn-2{
        float:right;
    }
    .clr{
        clear:both;
    }
    /* 菜单3 */
    #menu-3{
        width:400px;    
        height:0;
    }
    #menu-3-wrapper{
        top:0;
        left:300px;
        position:absolute;
    }
    #ctrl-btn-3{
        clear: both;
        left: 150px;
        position: relative;
        top: 0;
    }
    /* 菜单4 */
    #menu-4{
        clear: both;
        width:400px;    
        height:400px;
        display:block;
    }
    #menu-4-wrapper{
        bottom:0;
        left:300px;
        position:absolute;
    }
    #ctrl-btn-4{
        clear: both;
        left: 150px;
        position: relative;
        top: 0;
    }
    </style>
</head>

<body>
<div id="menu-1" class="hide-menu"></div>
<div id="ctrl-btn-1" class="ctrl-btn closed">展开>></div>

<div id="menu-2" class="hide-menu"></div>
<div id="ctrl-btn-2" class="ctrl-btn">关闭>></div>

<div id="menu-3-wrapper">
    <div id="menu-3" class="hide-menu"></div>
    <div id="ctrl-btn-3" class="ctrl-btn closed">向下展开</div>
</div>
<div id="menu-4-wrapper">
    <div id="ctrl-btn-4" class="ctrl-btn">关闭</div>
    <div id="menu-4" class="hide-menu"></div>
</div>
<div class="clr"></div>
</body>
</html>

		自动登录	找回密码
密码			免费注册

[WEB前端] jQuery实现菜单点击隐藏（上下左右）

相关帖子