Скрыть текстовое поле при нажатии окна (jQuery)

Question

У меня есть три значка. Когда я нажимаю один, я добавляю оверлей (например, световой блок), а затем вывожу текстовое поле, объясняющее значок, а затем скрываю текстовое поле при нажатии на оверлей.

Я получил все, кроме случаев, когда я снова нажимаю на поле, текстовое поле больше не появляется. Нужно ли мне что-то обновлять или что-то в этом роде?

HTML:

<div class="serviceOption"> 
    <a class="iconAnchor"> <i id="bigIcon" class="fa fa-laptop fa-3x" aria-hidden="true"></i></a> 
    <label for="serviceCheckbox"> Technology Audits</label> 
</div> 
<div id="techPopup" for="anchor1" class="popupBox"> 
    <h2>HEADLINE 1</h2> 
    <p> Popup text 1<p> 
</div> 

<div class="serviceOption"> 
    <a class="iconAnchor"><i id="bigIcon" class="fa fa-cloud fa-3x" aria-hidden="true"></i></a> 
    <label for="serviceCheckbox1"> Cloud Solutions</label> 
</div> 
    <div id="cloudPopup" class="popupBox"> 
    <h2>HEADLINE 2</h2> 
    <p> Popup text 2<p> 
    </div> 

<div class="serviceOption"> 
    <a class="iconAnchor"><i id="bigIcon" class="fa fa-envelope fa-3x" aria-hidden="true"></i></a> 
    <label for="serviceCheckbox2"> Email Solutions</label> 
</div> 
<div id="cloudPopup" class="popupBox"> 
    <h2>HEADLINE 3</h2> 
    <p>Popup text 3</p> 
</div> 

и мой JQuery:

/* ----------- SERVICES TOGGLE ON SERVICES PAGE--------------- */ 
// 1. Create overlay and append it to body 
var overlay = $('<div id=overlay></div>'); 
$('body').append(overlay); 


$('.iconAnchor').click(function(){ 
    var serviceParagraph = $(this).closest('.serviceOption').next('.popupBox'); 
    overlay.show(); 
    overlay.append(serviceParagraph); 
    serviceParagraph.slideDown(); 
}); // end ICON click 

$(overlay).click(function(event){ 
    $('.popupBox').slideUp(200);  
    overlay.hide(); 
}); // end OVERLAY click 

Answer 1

Если вы собираетесь использовать JQuery, slideToggle() идеально подходит для этого случая использования ...

$(document).ready(function(){ 
    $('.popupBox').hide(); 
    $('.iconAnchor').click(function(){ 
    $(this).closest('.serviceOption').next('.popupBox').slideToggle(); 
    }); 
    $('.popupBox').click(function(){ 
    $(this).slideToggle(); 
    }) 
}); 

EDIT

Так что я думаю, что есть, вероятно, более эффективные способы того, что вы хотите, но ради сохранения вашего наложения DIV, это будет работать:

$(document).ready(function(){ 
    var overlay = $('<div id=overlay></div>'); 
    $('body').append(overlay); 
    $('.popupBox').hide(); 
    $('.iconAnchor').click(function(){ 
    overlay.empty().html($(this).closest('.serviceOption').next('.popupBox').html()); 
    overlay.slideDown(); 
    }); 
    overlay.click(function(){ 
    $(this).slideUp(); 
    }) 
}); 

Также причиной, почему ваш исходный код не работает, как вы ожидаете потому что, когда вы добавляете элемент popupBox в свой оверлейный div, он фактически перемещается внутри div и больше не существует там, где вы ожидаете, что это произойдет в следующий раз, когда вызывается обработчик кликов для iconAnchor. Это означает, что ваш serviceParagraph.slideDown() вызывается на пустой элемент.