О 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' : ''); 
} 

Существует неограниченный идентификатор тумблер скрипт тоже:

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 должен сделать свой контейнер относительное позиционированы и «Хитрость окно», абсолютно позиционирован, с максимальным размером экрана, и г-индексируется под контейнером, как это:

#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

Надеется, что это поможет ,