Question

我认为这应该是一个简单的解决方案，或者我可能会以错误的方式解决这个问题。

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

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

有没有办法让点击状态覆盖悬停状态，所以它会回到静态颜色？

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

我做了一个小提琴here

你真的无法看到问题的实际情况，因为它全部都在自成一体的小提琴盒中。

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

Answer 1

您应该放置代码来更改动画完成后要执行的函数中的下拉颜色。

而不是：

 submenu.stop().slideDown('fast');
 $(this).css('color','#000');

使用：

submenu.stop().slideDown('fast', function() { 
    dropdown.css('color','#000');  //this part gets executed after the animation
});

这是更新的小提琴：http://jsfiddle.net/fpFCj/2/

Answer 2

正如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的演示。

Answer 3

$('.dropdown').on({
    click: function() {
        $(this).css('color', $(this).siblings('.sublinks').is(":hidden") ? '#000' : '#BDBDBD')
               .siblings('.sublinks').stop().slideToggle('fast');
    },
    mouseenter: function() {
        if (!$(this).next().is(":visible")) $(this).css('color','#6e6e6e');
    },
    mouseleave: function() {
        if (!$(this).next().is(":visible")) $(this).css('color','#BDBDBD');
    }
});

FIDDLE

如何获取单击状态以覆盖jQuery中的悬停状态

3 个答案: