一次点击后添加/隐藏div

我试图在点击后添加/隐藏潜水。现在，我可以添加一个div，当我点击一个按钮。然后，如果我点击关闭，我可以删除div。问题是我无法读取div，如果我再次点击一个按钮而不重新加载页面。就像这样，如果我的潜水被移除，它就不会再出现。一次点击后添加/隐藏div

这里是我的代码：

$('.close-div').on('click', function(){ 
 
$(this).closest("#closeme").remove(); 
 
});

<ul class="" role="tablist"> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsports" href="#vtab1" role="tab" data-toggle="tab"> Sports</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsante" href="#vtab2" role="tab" data-toggle="tab"> Santé</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublisharts" href="#vtab3" role="tab" data-toggle="tab"> Arts</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsci" href="#vtab4" role="tab" data-toggle="tab"> Sciences et technologies</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishgastro" href="#vtab4" role="tab" data-toggle="tab"> Gastronomie</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsocial" href="#vtab4" role="tab" data-toggle="tab"> Social</a></li> 
 
\t \t \t \t \t \t \t \t \t <li class="listlayer6publish"><a class="btn btn-dark btnpublish" href="#vtab4" role="tab" data-toggle="tab"> Autres</a></li> 
 
\t \t \t \t \t \t \t \t </ul> 
 

 
<div class="tab-content" id="closeme"> 
 
\t \t \t \t \t \t \t \t \t <div class="alert tab-pane fade" id="vtab1"> 
 
\t \t \t \t \t \t \t \t \t <div class="close-wrapper"> 
 
     <a href="#" class="close-div">Close</a> 
 
    </div> 
 
\t \t \t \t \t \t \t \t \t \t <h3 class="title">Sports</h3> 
 
\t \t \t \t \t \t \t \t \t \t <p>Trouvez des sportifs dans l'âme sur Benevolo pour vous aider dans vos tournois, compétitions.</p> 
 
\t \t \t \t \t \t \t \t \t </div>

有谁知道怎么给你删除后，重新进行添加一个div？我不知道如何更清楚/更精确？谢谢（我做了一些研究，但我没有真正在js中编码，所以我不能处理很多代码......）！

来源

2015-11-25 user3163600

_“能够加入一个div当我点击一个按钮。 “_可以包含'js'的部分，其中'div'被添加到'document'的问题？ – guest271314

你的逻辑有问题！ “关闭”按钮位于隐藏onclick事件的div内部。所以，如果你点击它，你只是不能再次点击它（因为它将被隐藏）和事件将不会被解雇，再次显示它！

所以，一个解决方案是当其他按钮被点击时显示div。

Your code working

的JavaScript

$('.btn').on('click',function() { 
    debugger; 
    var div = $("#closeme"); 
    div.css('display', 'block'); // it shows 
}); 

$('.close-div').on('click', function() { 
    var div = $("#closeme"); 
    div.css('display', 'none'); // it hides 
});

或者你可以只使用隐藏和显示功能“HC_”用户说：

$('.btn').on('click',function() { 
    debugger; 
    var div = $("#closeme"); 
    div.show(); 
}); 

$('.close-div').on('click', function() { 
    var div = $("#closeme"); 
    div.hide(); 
});

来源

2015-11-25 01:22:05

谢谢你，我解决了我的问题，我把你的答案和“HC_”混合在一起！再次感谢！ – user3163600

不客气！） –

不要使用.remove();

使用.hide();和.show();

您还可以享受与.slideToggle();

来源

2015-11-25 00:54:41

你能指导我一点吗？正如我所说的，我没有学过js ... – user3163600

您也可以点击使用.toggle()命令试验。这是jQuery，我相信它可以很好地解决你的问题。

来源

2015-11-25 00:59:24

如何？：o因为我说，我没有倾斜js所以我我迷路了... – user3163600

试试这个

 <html> 
     <head> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     </head> 
     <body> 
     <script> 
    jQuery(document).ready(function(){ 
    jQuery('#close').on('click', function(event) {   
     jQuery('#closeme').toggle('hide'); 
      }); 
    }); 
    </script> 



     <div class="tab-content" id="closeme" name="closeme" > 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsports" href="#vtab1" role="tab" data-toggle="tab"> Sports</a></li> 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsante" href="#vtab2" role="tab" data-toggle="tab"> Santé</a></li> 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublisharts" href="#vtab3" role="tab" data-toggle="tab"> Arts</a></li> 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsci" href="#vtab4" role="tab" data-toggle="tab"> Sciences et technologies</a></li> 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishgastro" href="#vtab4" role="tab" data-toggle="tab"> Gastronomie</a></li> 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish btnpublishsocial" href="#vtab4" role="tab" data-toggle="tab"> Social</a></li> 
     <li class="listlayer6publish"><a class="btn btn-dark btnpublish" href="#vtab4" role="tab" data-toggle="tab"> Autres</a></li> 
     </div> 
     <div class="alert tab-pane fade" id="vtab1"> 
     <div class="close-wrapper"> 

     </div> 
     <input type='button' id="close" name="close" value='hide/show'> 
     <h3 class="title">Sports</h3> 
     <p>Trouvez des sportifs dans l'âme sur Benevolo pour vous aider dans vos tournois, compétitions.</p> 
     </div> 
     </body> 
     </html>

来源

2015-11-25 01:32:09

试试这个其工作正常，并告诉我，如果有任何问题 –

你应该隐藏它，但不能删除div –

@ user3163600，你有没有试过这个代码？ –

一次点击后添加/隐藏div

回答

相关问题