當點擊框（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()正在一個空的元素上被調用。