这是我先前的问题jQuery UI hiding not taking effect for early DOM elements的后续内容。我几乎只是编辑了那个,但不想让Toffler使the accepted answer无效。我写这个问题的方式,答案在技术上并没有错,但是并不能解决我的问题。
回顾一下,我希望能够显示和隐藏div
个组。我显示给定组的策略是隐藏所有组(按班级选择),然后取消隐藏我想要的组(再次按班级选择)。
第一个问题的答案是建议使用jQuery UI和核心jQuery中的hide()
和show()
/ fadeIn()
。当我使用不带参数的这些函数时,隐藏功能将按预期方式工作(答案的摘录已证明)。
问题是,当我尝试重新添加一种效果类型(即the hide()
function的第一个参数)时,事情又再次中断了;下面的MCVE代码段。具体来说,当隐藏并显示DOM中更下方的一组元素时,DOM中位于其上方的元素仍然可见。要从新加载的代码段进行复制,请尝试在“显示组A”之后单击“显示组B”。 (这使事情更加混乱,按第二次 正常工作,单击“显示组B”。)
我想知道这是否与jQuery UI - Dialog Hide Effect in Firefox - Flickering和jQuery UI effect causes iframe reload所涉及的引擎盖下DOM刷新行为有关,但是我没有JS印记可以告诉我自己。
是什么导致这里的基本行为?如何在仍然可以使用效果(可能还有其他参数)的情况下使其工作?
$(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>
答案 0 :(得分:1)
问题是.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>