当点击框（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(); 
    }) 
}); 

编辑

所以我觉得有可能是更好的方法，你想要什么，但为维护您的叠加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()正在一个空的元素上被调用。