代码之家 › 专栏 › 技术社区 › SOLO mozboz

早期的dom元素在jquery ui中使用effects时不隐藏

jquery-ui jquery javascript

SOLO mozboz · 技术社区 · 6 年前

这是我先前问题的后续 jQuery UI hiding not taking effect for early DOM elements . 我几乎只是编辑了那个,但不想让它失效 the accepted answer 托夫勒。我写这个问题的方式,答案在技术上没有错,但并不能解决我的问题。

概括地说,我希望能够显示和隐藏 div 我显示给定组的策略是隐藏所有组(按类选择),然后取消隐藏所需的组(再次按类选择)。

我第一个问题的答案是 hide() 和 show() / fadeIn() 来自jquery ui和核心jquery。当我使用那些没有参数的函数时,隐藏可以按预期工作(答案的片段证明了这一点)。

问题是,当我试图添加一个效果类型(即 the hide() function ),事情再次破裂;下面是mcve片段。具体来说,当在dom中隐藏并进一步显示一组元素时,dom中位于其上方的元素将保持可见。若要从新加载的片段中重新生成,请尝试单击“显示组A”后的“显示组B”。(让事情变得更加混乱,第二次单击“显示组B” 做按预期工作。)

我想知道这是否与 jQuery UI - Dialog Hide Effect in Firefox - Flickering 和 jQuery UI effect causes iframe reload ,但我没有自己的能力。

是什么导致了这里的底层行为,我如何在仍然能够使用效果(可能还有其他参数)的情况下让它工作?

$(function() {
  $("#showAll").on("click", function() {
    $('.box').fadeIn();
  });

  $("#showA").on("click", function() {
    $('.box').hide('clip');
    $('.groupA').fadeIn();
  });

  $("#showB").on("click", function() {
    $('.box').hide('clip');
    $('.groupB').fadeIn();
  });
});

.box {
  border: 1px solid black;
}

<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</head>
<body>
  <button id="showAll">Show all</button>
  <button id="showA">Show group A</button>
  <button id="showB">Show group B</button>

  <div id="aOne" class="box groupA">
    <h4>A1</h4>
  </div>
  <div id="aTwo" class="box groupA">
    <h4>A2</h4>
  </div>

  <div id="bOne" class="box groupB">
    <h4>B1</h4>
  </div>
  <div id="bTwo" class="box groupB">
    <h4>B2</h4>
  </div>
</body>
</html>

1 回复 | 直到 6 年前

Twisty 6 年前

问题是 .hide() 希望事情是可见的,我想这是使他们可见,然后剪辑他们。

因此,我们只隐藏可见项: $(".box:visible")

$(function() {
  $(".tools button").click(function(e) {
    e.preventDefault();
    var btn = $(this);
    $(".box:visible").hide("clip", function() {
      switch (btn.attr("id")) {
        case "showAll":
          $(".box").show();
          break;
        case "showA":
          $(".A").show();
          break;
        case "showB":
          $(".B").show();
          break;
      }
    });
  });
});

.box {
  border: 1px solid black;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

<div class="tools">
  <button id="showAll">Show all</button>
  <button id="showA">Show group A</button>
  <button id="showB">Show group B</button>
</div>
<div id="aOne" class="box A">
  <h4>A1</h4>
</div>
<div id="aTwo" class="box A">
  <h4>A2</h4>
</div>

<div id="bOne" class="box B">
  <h4>B1</h4>
</div>
<div id="bTwo" class="box B">
  <h4>B2</h4>
</div>