如何獲取點擊狀態來覆蓋jQuery中的懸停狀態

我認爲這應該是一個簡單的修復，或者我可能會以錯誤的方式進行。如何獲取點擊狀態來覆蓋jQuery中的懸停狀態

我有一個手風琴菜單，單擊按鈕上下滑動。激活手風琴的按鈕具有靜態，懸停和點擊狀態，只需更改文本顏色即可。

所有的工作都很好，除非你在關閉一個手風琴菜單之後已經向下滾動頁面。瀏覽器窗口向上移動摺疊手風琴，但它從不激活懸停關閉功能，所以按鈕保持點擊狀態。如果你把鼠標懸停在按鈕上，一切都會回到它應該的樣子。

有沒有辦法讓點擊狀態覆蓋懸停關閉狀態，所以它返回到靜態顏色？

有一些代碼。這可能有助於解釋我在說什麼。

我做了一個小提琴here

你不會真的能看到實際的問題，因爲它是所有的自包含的小提琴盒。

讓我知道如果我可以嘗試進一步解釋這一點。

來源

2012-08-13 Carey Estes

有沒有使用CSS'一個原因：hover'調整顏色？ – 2012-08-13 20:37:10

薩姆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"); 
}

Demo at jsFiddle。

來源

2012-08-13 20:50:50 mgibsonbr

您應該將代碼更改爲在動畫完成後要執行的函數中的下拉顏色。

相反的：

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-13 20:50:15

$('.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

來源

2012-08-13 21:03:43 adeneo

如何獲取點擊狀態來覆蓋jQuery中的懸停狀態

回答

相關問題