javascript - 一次又一次点击后添加/隐藏一个div

Question

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

这是我的代码:

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

<ul class="" role="tablist">
									<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>
								</ul>

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

有谁知道在删除 div 后如何重新添加它？我不知道如何更清楚/准确？谢谢(我做了一些研究，但我并没有真正用 js 编写代码，所以我真的无法处理很多代码...)!

Answer 1

你的逻辑有问题! “关闭”按钮位于隐藏 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();
});