Question

非常基本的问题。我想要使用一个以上的功能。此代码只能运行一次。如果我想再次使用该功能，我必须重新加载页面，这有点烦人......

HTML：

<div id="phone-header-icon" class="header-icons"></div>
<div id="phonefade">
<div class="close_box">X</div>
<p class="phone-p" id="phone-p-1">Call us!<br/>Monday-friday.</p>
<p class="phone-p" id="phone-p-2">XXX XXX XXXX(phonenumber, the content is not important anyway)</p>
</div>

的CSS：

    #phonefade{
background-color:#FFF;
height:100px;
width:33%;
overflow:hidden;
margin-left:15%;
margin-top:2%;
opacity:0.95;
display:none;
-webkit-box-shadow:0px 8px 6px -5px grey;

Jquery的：

$(document).on('click','#phone-header-icon',function(){
  $("#phonefade").css({ display: "block" });
});
$(document).on('click','.close_box',function(){
    $(this).parent().remove();
});

Answer 1

 $(document).on('click','#phone-header-icon',function(){
   $("#phonefade").show();
 });

 $(document).on('click','.close_box',function(){
    $(this).parent().hide();
 });

当你第二次尝试加载div时，

.remove()完全从dom.so中删除元素。实际上它不存在show.instead尝试使用hide()

隐藏div

fiddle

我创造了一个小提琴。它工作得很好。如果它仍然导致问题，我想我可能是因为你可能正在使用的其他一些javascript

Answer 2

使用.remove()永久removing来自DOM的特定元素。但根据你的目标，你必须hide。

试试这个，

$(document).on('click','#phone-header-icon',function(){
  $("#phonefade").show();
});

$(document).on('click','.close_box',function(){
    $(this).parent().hide();
});

多次使用函数 - TimeOut，（document）.ready（function（）{

2 个答案: