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元素附加到overlay div时，它实际上是在div内部移动而不再存在于您希望它的位置下次调用iconAnchor的click处理程序时。这意味着您在空元素上调用serviceParagraph.slideDown()。

单击关闭框时隐藏文本框（jQuery）

1 个答案: