我正在尝试使用jQuery实现简单的隐藏/显示功能。我有两组盒子：A 和 B。我希望能够单击一个按钮仅查看 A 组中的框，单击另一个按钮仅显示 B 组。这不应取决于之前页面上发生的情况或按钮按下的顺序。
基于 jQuery UIhide()函数的官方基本代码示例，我使用了一种策略，其中按钮单击有两种效果：首先，隐藏两个组中的所有框，其次，显示我想查看的组中的框。还有一个按钮可以显示所有框，基本上可以重置。
有时这有效，有时无效(下面的 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>