3

我认为这应该是一个简单的解决方法，或者我可能走错了路。

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

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

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

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

我在这里做了一个小提琴

您将无法真正看到问题的实际情况，因为它都在独立的小提琴盒中。

让我知道我是否可以尝试进一步解释这一点。

4

3 回答 3

2

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

代替：

 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/

于 2012-08-13T20:50:15.670 回答
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演示。

于 2012-08-13T20:50:50.913 回答
1 
$('.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');
    }
});

小提琴

于 2012-08-13T21:03:43.317 回答