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

Question

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

，如果我按一下按钮，内容会显示（开），

如果内容上显示（开），当我点击文件（除内容），内容将接近。

var $ = function（id）{ return！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

要切换元素的显示，你可以使用函数如下：

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样这个屏幕的最大尺寸，并且：

#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。

Answer 2

你的问题，因为这一个完全相同： -

退房这个职位： - jQuery on click $(document) - get clicked element

希望这将有助于。