Question

<div id="wrapper">
    <button id="ppp">button</button>
    <div id="content" style="display:none;"></div>
</div>

如果我点击按钮，内容将显示（打开），

如果内容显示（打开），当我单击文档（内容除外）时，内容将关闭。

var $ = function（id）{ 返回！id？ null：document.getElementById（id）; }

var addEventSimple = function(obj, evt, fn) {
    if (obj.addEventListener){ // W3C
        obj.addEventListener(evt, fn, false);
    }else if (obj.attachEvent) // Microsoft
        obj.attachEvent('on' + evt, fn);
}



var button = $('ppp'),
    content = $('content');


var init = function() {};

init.handleObj = button;
init.showbox = content;    
init.flag = false;
init.allowcls = false;    
init.open = function () {//open the content
        if (this.flag == false) {
            this.showbox.style.display = "block";
            this.flag = true;
            this.allowcls = true;
        }
    };
init.close =  function () { // close the content
        if (this.flag && this.allowcls) {
                this.showbox.style.display = "none";
                this.flag = false;
                this.allowcls = false;
        }
    };
init.load = function() { // button click
        //e = e ||window.event;
        //e.preventDefault();
        if (this.flag) {
            this.close();
        } else {
            this.open();
        }
    };
init.clickClose = function(e) { // document click

        if (!this.allowcls) {
            return;
        }
        e = e ||window.event;
        var target = e.target;
        if (target === this.showbox) { // button
            return;
        }       
         this.close();
};


addEventSimple(button, 'click', function (){
    init.load();//the code run here OK
})// error on here,but i don't know why?
addEventSimple(document, 'click', function (e){
    init.clickClose(e);
})

代码在这里：http://jsfiddle.net/DCty3/

Answer 1

您的问题与此问题完全相同： -

查看这篇文章： - jQuery on click $(document) - get clicked element

希望这会有所帮助。

Answer 2

要切换元素显示，您可以使用以下功能：

function toggleDisplay(id) {
    var elem = document.getElementById(id);
    elem.style.display = (elem.style.display != 'none' ? 'none' : '');
}

还有无限的ID切换脚本：

function toggle() {
    for ( var i=0; i < arguments.length; i++ ) {
        var elem = document.getElementById(id);
        elem.style.display = (elem.style.display != 'none' ? 'none' : '' );
    }
}

使用jQuery只会：

function toggleDisplay(id) {
    $('#' + id).toggle();
}

我喜欢喜欢用物体，这是另一种多功能方法：

var display = {
    show : function() {
        for ( i=0; i < arguments.length; i++ ) {
            document.getElementById(arguments[i]).style.display = '';
        }
    },
    hide : function() {
        for ( i=0; i < arguments.length; i++ ) {
            document.getElementById(arguments[i]).style.display = 'none';
        }
    },
    toggle : function() {
        for ( i=0; i < arguments.length; i++ ) {
            var elem = document.getElementById(arguments[i]);
            elem.style.display = (elem.style.display != 'none' ? 'none' : '' );
        }
    }
};

要使用它，请执行以下操作：

display.show('content','content2','content3');
display.hide('content','content2','content3');
display.toggle('content','content2','content3');

为方便起见，您可以添加另一个功能来启用按钮：

function toggleDisplayButton(bId, cId) {
    document.getElementById(bId).onclick = (function() {
        toggleDisplay(cId);
    });
}
window.onload = (function() {
    toggleDisplayButton('ppp','content');
});

要启用功能，当用户点击“框外”并关闭时，通过在背景中创建另一个覆盖所有区域的元素，可以使用一个简单的技巧：

<div id="wrapper">
    <button id="ppp">button</button>
    <div id="outerBox" style="display:none;"></div>
    <div id="content" style="display:none;">1</div>
</div>

CSS应该使你的容器相对定位并且“绝对定位”，绝对定位，具有最大屏幕大小，并且在容器下z-indexed如下：

#content{width:100px;height:100px;background-color:#efefef;border:1px solid #555555;z-index:56;position:relative;}
#outerBox{width:100%;height:100%;position:absolute;top:0;left:0;z-index:55;}

让它像这样工作：

var display = {
    toggle : function() {
        for ( i=0; i < arguments.length; i++ ) {
            var elem = document.getElementById(arguments[i]);
            elem.style.display = (elem.style.display != 'none' ? 'none' : '' );
        }
    }
};
function toggleBox() {
    document.getElementById('ppp').onclick = (function() {
        display.toggle('content','outerBox');
    });
    document.getElementById('outerBox').onclick = (function() {
        display.toggle('content','outerBox');
    });
}
onload = function() {
    toggleBox();
}

结果如this。

关于javascript showbox，我需要一些帮助！在线~~

2 个答案: