Question

我不确定我的问题是标题说但是当我将Display：None元素更改为Display：Block时，我认为div不能渲染。 JS文件不会覆盖div。并且图像不显示。但是当我使用visibility：hidden和visibility：visible功能时，它的工作正常。这是我的文件;

  <div id="gnc2"class="row">
    <div class="col s3 offset-s1">
      <div class="thumbnail">
    <img src="galeri/gizemler/1.jpg" alt="Gizemler">
    <div class="caption">
      <h5 class="center-align">Gizemler</h5>
      <p class="center-align">Serideki mitler, gizemler</p>
      <p class="center-align"><a id="nbg2" class="waves-effect waves-light btn">Ateşle</a></p>
    </div>
  </div>
  </div>
  </div>

  <div id="nbg1">
    <div class="main-gallery js-flickity" data-flickity-options='{ "cellAlign": "left", "contain": true, "prevNextButtons": false, "pageDots": false }'>
      <img src="galeri/gizemler/1.jpg" />
      <img src="galeri/gizemler/2.jpg" />
      <img src="galeri/gizemler/3.jpg" />
    </div>
  </div>

我的剧本;

      <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <script type="text/javascript" src="js/flickity.pkgd.min.js"></script>

        <script type="text/javascript">
        $('#nbg2').click(function() {
        $("#gnc2").css("display","none");
        $("#nbg1").css("display","block");
      });
      </script>

CSS;

#nbg1 {
 display: none;
}

Answer 1

首先，你应该把你的jQuery代码放在这之间：

$(document).ready(function() {
   $('#nbg2').click(function() {
      $("#gnc2").css("display","none");
      $("#nbg1").css("display","block");
   });
}

通过这种方式，您可以确保在应用javascript之前正确加载整个页面。

然后，我不知道你的flickity库到底做了什么，但是如果它与你的＃nbg1宽度和高度值一起播放，如果这个div的内容根本没有显示，它可能无法重新定义它们（显示：无）。如果你在没有回调方法时被迫使用这个库，我建议你试试这个技巧：

在你的CSS中：

#nbg1 {
    visibility: hidden;
}

在你的JS中：

$(document).ready(function() {
    setTimeout(function(){
        $("#nbg1").css("visibility","visible");
        $("#nbg1").hide();
        $('#nbg2').click(function() {
            $("#gnc2").hide();
            $("#nbg1").show();
        });           
    }, 200);
});

您可以使用它并播放延迟值（此处为200）。如果你的flickity库有一些“完成工作”的回调方法，我建议你使用这个，而不是我在这里写的超时技巧。

希望它有所帮助。

显示块后Div内容不会渲染

1 个答案: