jquery - 如何获取点击状态以覆盖 jQuery 中的悬停状态

Question

我认为这应该是一个简单的修复方法，或者我可能采用了错误的方式。

我有一个 Accordion 式菜单，单击按钮即可上下滑动。激活 Accordion 的按钮具有静态、悬停和单击状态，只需更改文本颜色即可。

一切正常，除非您在向下滚动页面后关闭 Accordion 菜单。浏览器窗口向上移动折叠 Accordion ，但它从未激活悬停关闭功能，因此按钮保持单击状态。如果将鼠标悬停在按钮上，一切都会恢复到应有的状态。

有没有办法让点击状态覆盖悬停关闭状态，使其恢复为静态颜色？

有一些代码。它可能有助于解释我在说什么。

我做了一个 fiddle here

您将无法真正看到问题的实质，因为它都在独立的 fiddle 盒中。

如果我可以尝试进一步解释这一点，请告诉我。

Answer 1

正如 Sam Dufel 所说，使用 :hover 会产生更好的结果。您也可以使用类而不是直接设置 css 属性，这样浏览器就会为您完成决定在特定时刻显示哪种样式的艰巨工作。

.dropdown.expanded {
    color:#000;
}

.dropdown.collapsed {
    color:#BDBDBD;
}

.dropdown:hover {
    color:#6e6e6e;
}

...

// Remove the whole $.hover

if (submenu.is(":hidden")) {
    submenu.stop().slideDown('fast');
    $(this).removeClass("collapsed").addClass("expanded");
}
else {
    submenu.stop().slideUp('fast');
    $(this).removeClass("expanded").addClass("collapsed");
} 

演示在 jsFiddle .