更改css：懸停效果jquery.onclick（）

Question

我想創建一個下拉菜單（對於手機：媒體查詢已在工作），但我想要改變我的菜單按鈕（CSS）的:hover效果爲jquery .onclick()函數。

我知道我的代碼並不遙遠，但我不能解決問題。

任何人都可以給我一個小費？

繼承人的小提琴：http://jsfiddle.net/4G3gg/

HTML

<ul class="navigation"> 
    <img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/> 
    <li class="n1"><a href="#">Home</a></li> 
    <li class="n2"><a href="#">Portfolio</a></li> 
    <li class="n3"><a href="#">Services</a></li> 
    <li class="n4"><a href="#">About</a></li> 
    <li class="n5"><a href="#">Contacts</a></li> 
</ul> 

CSS

#mobile:hover{background-color: rgba(255, 255, 255, 0.15);} 

a{text-decoration: none;color: white; padding: 10px 50px; font-weight: bold} 

a:hover { color: #777; font-weight: bold;} 
/* NAVIGATION */ 
.navigation { 
    list-style: none; 
    padding: 0; 
    width: 50px; 
    height: 40px; 
    margin: 0 auto; 
    position: relative; 
    z-index: 100; 
} 

.navigation, .navigation a.main { 
    border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
} 

.navigation:hover, .navigation:hover a.main { 
    border-radius: 4px 4px 0 0; 
    -webkit-border-radius: 4px 4px 0 0; 
    -moz-border-radius: 4px 4px 0 0; 
} 

.navigation a.main { 
    display: block; 
    height: 30px; 
    font: bold 15px/40px arial, sans-serif; 
    text-align: center; 
    text-decoration: none; 
    color: #FFF; 
    -webkit-transition: 0.2s ease-in-out; 
    -o-transition: 0.2s ease-in-out; 
    transition: 0.2s ease-in-out; 
    position: relative; 
    z-index: 100; 
} 

.navigation:hover a.main { 
    color: rgba(255,255,255,0.6); 
    background: rgba(0,0,0,0.04); 
} 

.navigation li { 
    width: 200px; 
    height: 40px; 
    background: #131313; 
    font: normal 12px/40px arial, sans-serif !important; 
    color: #999; 
    text-align: center; 
    margin: 0; 
    -webkit-transform-origin: 50% 0%; 
    -o-transform-origin: 50% 0%; 
    transform-origin: 50% 0%; 
    -webkit-transform: perspective(350px) rotateX(-90deg); 
    -o-transform: perspective(350px) rotateX(-90deg); 
    transform: perspective(350px) rotateX(-90deg); 
    box-shadow: 0px 2px 10px rgba(0,0,0,0.05); 
    -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05); 
    -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05); 
} 

.navigation li:nth-child(even) { background: #131313; } 
.navigation li:nth-child(odd) { background: #1c1c1c; } 

.navigation li.n1 { 
    -webkit-transition: 0.1s linear 0.1s; 
    -o-transition: 0.1s linear 0.1s; 
    transition: 0.1s linear 0.1s; 
} 
.navigation li.n2 { 
    -webkit-transition: 0.1s linear 0.1s; 
    -o-transition: 0.1s linear 0.1s; 
    transition: 0.1s linear 0.1s; 
} 
.navigation li.n3 { 
    -webkit-transition: 0.1s linear 0.1s; 
    -o-transition: 0.1s linear 0.1s; 
    transition: 0.1s linear 0.1s; 
} 
.navigation li.n4 { 
    -webkit-transition:0.1s linear 0.1s; 
    -o-transition:0.1s linear 0.1s; 
    transition:0.1s linear 0.1s; 
} 
.navigation li.n5 { 
    border-radius: 0px 0px 4px 4px; 
    -webkit-transition: 0.1s linear 0s; 
    -o-transition: 0.1s linear 0s; 
    transition: 0.1s linear 0s; 
} 

.navigation:hover li { 
    -webkit-transform: perspective(350px) rotateX(0deg); 
    -o-transform: perspective(350px) rotateX(0deg); 
    transform: perspective(350px) rotateX(0deg); 
    -webkit-transition:0.2s linear 0s; 
    -o-transition:0.2s linear 0s; 
    transition:0.2s linear 0s; 
} 
.navigation:hover .n2 { 
    -webkit-transition-delay: 0.1s; 
    -o-transition-delay: 0.1s; 
    transition-delay: 0.1s; 
} 
.navigation:hover .n3 { 
    -webkit-transition-delay: 0.15s; 
    -o-transition-delay: 0.15s; 
    transition-delay: 0.15s; 
} 
.navigation:hover .n4 { 
    transition-delay: 0.2s; 
    -o-transition-delay: 0.2s; 
    transition-delay: 0.2s; 
} 
.navigation:hover .n5 { 
    -webkit-transition-delay: 0.25s; 
    -o-transition-delay: 0.25s; 
    transition-delay: 0.25s; 
} 

JQUERY/JS

$(".navigation").addClass("js"); 
$(".navigation").addClass("js").before('<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>'); 

$("#mobile").click(function(){ 
    $(".navigation").toggle(); 
}); 

Answer 1

取而代之的是僞選擇.navigation:hover使用一個新的類像CSS .navigation.open，然後用.toggleClass()切換在click()處理程序中的菜單能見度

jQuery(function ($) { 
    //$(".navigation").addClass("js"); 
    //$(".navigation").addClass("js").before('<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>'); 

    $("#mobile").click(function() { 
     $(".navigation").toggleClass('open'); 
    }); 
}) 

演示：Fiddle

注意：在你的小提琴中，你忘了添加jQuery庫