Как скрыть тумблер (ДИВ) при щелчке в любом месте на странице

Question

я использовал toggle Скрыть/Показать DIV

HTML

<div class="wrap"> 

    <h1 id="selectBox">Service you&#39;re interested in</h1> 

    <div class="selectBox"> 
    <div class="selectBoxWrap"> 

     <ul class="selectBoxContent"> 
     <li><input type="checkbox" name="#" value="New Web Site" /> <span class="innerPageSelect">Website Design and Development</span></li> 
     <li><input type="checkbox" name="#" value="New Web Site" /> <span>Website Maintenance</span></li> 
     <li class="other"> 
      <p> 
      <label for="other">Other</label><br /> 
     <input type="text" name="other" value="" id="other" /> 
      </p> 
     </li> 
     </ul> 

     </div> 
    </div> 
</div> 

Jquery

$(function() { 

      $('#selectBox').click(function() { 
     $('.selectBoxContent').slideToggle('fast'); 
     return false; 

    }); 
     }); 

я хочу, скрыть тумблер DIV при нажатии в любом месте страницы после выбора услуг, проверив checkbox или введите что-то в textbox.

это моя скрипка here

свой комментарий и предложение ценится

спасибо заранее !!!

Answer 1

Используйте этот

$(document).click(function() { 
$('.selectBoxContent').slideUp('fast'); 
}); 

$(".selectBoxContent").click(function(e) { // Wont toggle on any click in the div 
e.stopPropagation(); 
}); 

Проверить это Fiddle

Answer 2

Вы можете связать обработчик событий нажмите на HTML тег:

$(function() { 
    $('#selectBox').click(function() { 
     $('html').click(function() { 
      $(this).unbind('click'); 
      $('.selectBoxContent').slideToggle('fast'); 
     }); 
     $('.selectBoxContent').slideToggle('fast'); 
     return false; 
    }); 
}); 

Answer 3

Вы можете использовать как этот

$('html').click(function() { 
     $('.selectBoxContent').slideToggle('fast'); 
    }); 

Вот это fiddle

Answer 4

$(function() { 
    $(document).on("click", function(e) { 
     if ($(e.srcElement).closest('.selectBoxWrap').length) return; 
     if ($('.selectBoxContent').is(":visible")) $('.selectBoxContent').slideToggle('fast'); 
    }); 
    $('#selectBox').on("click", function(e) { 
     if ($(e.srcElement).closest('.selectBoxWrap').length) return; 
     $('.selectBoxContent').slideToggle('fast'); 
     return false; 
    }); 
}); 

Fiddle: http://jsfiddle.net/TEyHC/9/