个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
这是我之前的问题 jQuery UI hiding not taking effect for early DOM elements 的后续问题。我几乎刚刚编辑了那个，但不想使 the accepted answer 无效。托夫勒.按照我写这个问题的方式，答案在技术上并没有错误，但它并不能解决我的问题。
回顾一下，我希望能够显示和隐藏 div 组。我显示给定组的策略是隐藏所有组(按类(class)选择)，然后取消隐藏我想要的组(再次按类(class)选择)。
我的第一个问题的答案建议使用 jQuery UI 和核心 jQuery 中的 hide() 和 show()/fadeIn() 。当我使用这些不带参数的函数时，隐藏按预期工作(由答案的片段证明)。
问题是，当我尝试重新添加效果类型(即 the hide() function 的第一个参数)时，事情再次中断；下面是 MCVE 片段。具体来说，当隐藏然后显示 DOM 中下方的一组元素时，DOM 中位于其上方的元素仍然可见。要从新加载的代码片段进行重现，请尝试单击“显示 A 组”之后的“显示 B 组”。 (让事情变得更加困惑的是，再次点击“显示 B 组”确实按预期工作。)
我想知道这是否与 jQuery UI - Dialog Hide Effect in Firefox - Flickering 中提到的底层 DOM 刷新行为有关。和 jQuery UI effect causes iframe reload ，但我自己没有 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>最佳答案
问题是 .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>关于javascript - 在 jQuery UI 中使用效果时，早期 DOM 元素不会隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51193146/
28
4
0
我正在为从 API 级别 8 到 14 的 android 开发一个应用程序。我正在尝试在早期版本中获得与 android 4(请参阅联系人应用程序)相同的快速滚动行为(右侧固定的时尚滚动条)边)。有
早期（编译期）优化 jvm的编译器可以分为三个编译器： 前端编译器：把*.java转变为*.class的过程。如sun的javac、eclipse jdt中的增量式编译器（ecj）
苹果终于推出了所谓的auto-renewable subscriptions昨天。由于我在应用内购买方面的经验很少(仅限沙盒)，所以我不确定我在这里是否一切顺利。似乎需要对收据进行服务器端验证。找出订
已结束。此问题不符合 Stack Overflow guidelines .它目前不接受答案。 要求代码的问题必须表明对正在解决的问题的最低理解。包括尝试的解决方案、它们为什么不起作用以及预期结果。另
在 Wagner 的“Effective C#”第 23 项中，他解释说 interface methods are not virtual...they are a declaration of a
我最近遵循了本指南 Installing a Git Server using Apache (WebDAV) on Ubuntu Server 12.04使用 Apache (WebDAV) 设置本
这是我之前的问题 jQuery UI hiding not taking effect for early DOM elements 的后续问题。我几乎刚刚编辑了那个，但不想使 the accepte
我正在尝试替换 ZonedDateTime.toInstant方法，因为它仅从 API 26 for Android 开始可用。 但我的应用程序应该支持 API 19。 我想将 ZonedDateTi
我的电脑正确配置了 SSH，我在尝试克隆存储库时遇到了这个错误: 我运行这个命令来克隆存储库 git clone ssh://git-codecommit.us-west-2.amazonaws.co
我是一名优秀的程序员,十分优秀！