我有一台jQuery可折叠手风琴。当我将鼠标悬停在每个手风琴标题上时,它们都会适当地切换到突出显示/选定的颜色状态。当我单击标题以打开手风琴的那部分然后再次单击以关闭手风琴的那部分时,突出显示/选择的颜色状态仍然存在。
所以如果手风琴有10个部分,那么我打开并关闭其中的3个,这3个颜色与手风琴的其他部分不同。这提供了一个糟糕的UI。任何人都知道为什么会这样,以及如何解决它?
编辑:
很抱歉没有提供开始的示例,我在NDA下工作,所以我不能直接提供它们。我把可能发生的事情的例子放在一起。
你可以在这里看到它:http://inadaydevelopment.com/StackOverflow/AccordionStateProblem/jqueryexample.html
如果将鼠标悬停在它们上方,它们会变为橙色(正确)。如果单击其中一个打开它,它仍然是橙色(正确)。如果你关闭它并且不再悬停,它仍然是橙色而不是回到蓝色(错误)。
答案 0 :(得分:2)
以下将清除造成问题的“ui-state-focus”类:
$('.ui-accordion .group > h3').mouseleave(function(){
$(this).removeClass('ui-state-focus')
})
这是在浏览器控制台中针对演示进行测试的。
编辑:选择器可以简单地缩小到:
$('.ui-accordion-header')