我正在尝试使用 jQuery 实现简单的隐藏/显示功能。我有两组框:A 和 B。我希望能够单击一个按钮以仅查看 A 组中的框，并单击一个不同的按钮以仅显示 B 组。这不应该取决于之前页面上发生的情况，或按钮按下的顺序。
基于 the jQuery UI hide() function 的官方基本代码示例，我使用的策略是单击按钮有两种效果:首先，隐藏两个组中的所有框，其次，显示我想看到的组中的框。还有一个显示所有框的按钮，基本上起到重置的作用。
有时这行得通，有时行不通(下面的 MVCE 片段)。当我从新页面加载或重置开始时，我可以单击按钮显示 A 组，这很好。但是，当我单击按钮以显示 B 组时，A 组按钮仍留在屏幕上。或者，从一个新页面/重置，我可以单击 B 组按钮并仅查看 B 组中的框，然后单击 A 组按钮并仅查看 A 组中的框，但之后我无法返回到 B 组.
对控制台和其他组的一些调查表明，这与 DOM 顺序有关。我始终可以选择任何我想要的给定组，但如果我随后尝试显示在 DOM 中较早出现的组，事情就会变得一团糟。
是什么导致了当前行为，我该如何解决？
$(function() {
$("#toggleAll").on("click", function() {
$('.box').removeAttr("style").hide().fadeIn();
});
$("#toggleA").on("click", function() {
$('.box').hide('clip', {}, 1000);
$('.groupA').removeAttr("style").hide().fadeIn();
});
$("#toggleB").on("click", function() {
$('.box').hide('clip', {}, 1000);
$('.groupB').removeAttr("style").hide().fadeIn();
});
});.box {
border: 1px solid black;
}<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</head>
<body>
<p>Show boxes of type:</p>
<button id="toggleAll">Show all</button>
<button id="toggleA">Show group A</button>
<button id="toggleB">Show group B</button>
<hr />
<div id="a1" class="box groupA">
<h4>Title</h4>
<p>Text for box A1</p>
</div>
<div id="a2" class="box groupA">
<h4>Title</h4>
<p>Text for box A2</p>
</div>
<div id="b1" class="box groupB">
<h4>Title</h4>
<p>Text for box B1</p>
</div>
<div id="b2" class="box groupB">
<h4>Title</h4>
<p>Text for box B2</p>
</div>
</body>
</html>最佳答案
只需在没有所有其他选项的情况下尝试使用简单的 hide() 和 show()，或者在您的情况下使用 fadeIn()
$(function() {
$("#toggleAll").on("click", function() {
$('.box').fadeIn();
});
$("#toggleA").on("click", function() {
$('.box').hide();
$('.groupA').fadeIn();
});
$("#toggleB").on("click", function() {
$('.box').hide();
$('.groupB').fadeIn();
});
});.box {
border: 1px solid black;
}<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</head>
<body>
<p>Show boxes of type:</p>
<button id="toggleAll">Show all</button>
<button id="toggleA">Show group A</button>
<button id="toggleB">Show group B</button>
<hr />
<div id="a1" class="box groupA">
<h4>Title</h4>
<p>Text for box A1</p>
</div>
<div id="a2" class="box groupA">
<h4>Title</h4>
<p>Text for box A2</p>
</div>
<div id="b1" class="box groupB">
<h4>Title</h4>
<p>Text for box B1</p>
</div>
<div id="b2" class="box groupB">
<h4>Title</h4>
<p>Text for box B2</p>
</div>
</body>
</html>关于javascript - jQuery UI 隐藏对早期 DOM 元素不生效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51156691/