Как закрывать спойлер нажатием в другю область?

166

22 апреля 2019, 22:30

Очень меня интересует как же закрыть спойлер нажатием на любую другую область, вне спойлера, ну и конечно что бы также закрывался и сам спойлер.

jQuery(document).ready(function(){ 
	jQuery('.spoiler-head').click(function(){ 
		$(this).parents('.spoiler-wrap').toggleClass("active").find('.spoiler-body').slideToggle(); 
	}) 
})

.spoiler-wrap{background:#fff;margin: 0 0 8px;border:1px solid #efefef} 
.spoiler-head{background:#efefef;cursor:pointer;padding:5px;} 
.spoiler-body{padding:10px} 
.spoiler-wrap.disabled .spoiler-body{display:none} 
.spoiler-wrap.active{border-color:#57AA43} 
.spoiler-wrap.active .spoiler-head{background:#57AA43;color:#fff}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="spoiler-wrap disabled"> 
  <div class="spoiler-head">Заголовок</div> 
  <div class="spoiler-body">Текст</div> 
</div>

Answer 1

$(document).ready(function(){ 
  $('.spoiler-head').click(function(){ 
    $(this).parents('.spoiler-wrap').toggleClass("active").find('.spoiler-body').slideToggle(); 
  }); 
  $(document).click(function(e){ 
    if (!$(e.target).hasClass('.spoiler-wrap') && !$(e.target).closest('.spoiler-wrap').length) { 
      // $('.spoiler-wrap').hide('slide'); // - совсем убрать 
      $('.spoiler-wrap').removeClass("active").find('.spoiler-body').hide('slide'); 
    } 
  }); 
});

.spoiler-wrap{background:#fff;margin: 0 0 8px;border:1px solid #efefef} 
.spoiler-head{background:#efefef;cursor:pointer;padding:5px;} 
.spoiler-body{padding:10px} 
.spoiler-wrap.disabled .spoiler-body{display:none} 
.spoiler-wrap.active{border-color:#57AA43} 
.spoiler-wrap.active .spoiler-head{background:#57AA43;color:#fff}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="spoiler-wrap disabled"> 
  <div class="spoiler-head">Заголовок</div> 
  <div class="spoiler-body">Текст</div> 
</div>