Question

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

这是我的代码：

<repositories>
    <repository>
        <id>jboss</id>
        <name>jboss</name>
        <url>http://repository.jboss.org/nexus/content/groups/public/</url>
        <layout>default</layout>
        <releases>
            <enabled>true</enabled>
        </releases>
        <snapshots>
            <enabled>true</enabled>
        </snapshots>
    </repository>
</repositories>

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

有人知道如何在删除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();
});

Answer 2

不要使用.remove();

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

http://api.jquery.com/hide/

您可能也喜欢尝试使用.slideToggle();

Answer 3

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

Answer 4

试试这个

      <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>

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

4 个答案: