jQuery UI隐藏不会对早期DOM元素生效

我正在尝试使用jQuery实现简单的隐藏/显示function。 我有两组方框：A和B.我希望能够单击一个按钮才能看到组A中的方框，而另一个按钮则只显示组B.这不应该取决于之前页面上发生的情况，或按下按钮的顺序。

基于jQuery UI hide()函数的官方基本代码示例，我使用的策略是按钮单击有两个效果：首先，隐藏两个组中的所有框，然后显示组I中的框想看。 还有一个显示所有盒子的按钮，基本上可以作为重置。

有时它会起作用，有时却不起作用（下面是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; } 

       
Show boxes of type:
 Show all Show group A Show group B 
 
 
Title
 
Text for box A1
 
 
 
Title
 
Text for box A2
 
 
 
Title
 
Text for box B1
 
 
 
Title
 
Text for box B2
 
   

Answer 1

只需在没有所有附加选项的情况下尝试它并使用简单的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; } 

       
Show boxes of type:
 Show all Show group A Show group B 
 
 
Title
 
Text for box A1
 
 
 
Title
 
Text for box A2
 
 
 
Title
 
Text for box B1
 
 
 
Title
 
Text for box B2