Rails - 下拉菜單圖標上的不透明度切換？

Question

當用戶點擊settings.svg圖標時，我創建了一個onclick下拉菜單。

當前，當用戶將鼠標懸停在此設置圖標上時，圖標上的不透明度會從0.3（默認不透明度）更改爲0.5。

我在努力擴展這種行爲。當用戶點擊設置圖標時，不透明度應該從0.3改爲0.5。它應該保持在0.5不透明度，直到用戶再次點擊圖標本身或頁面上的其他位置 - 返回0.3。

任何幫助將是偉大的 - 謝謝你！

application.html.erb

<ul class="navigation-bar"> 

<div class="navigation-bar-right-inset"> 
<li class="navigation-bar-right" id="drop"> <span class="settings"> <a href="#"> <img class="#" src="/assets/settings.svg"> </a> </span> 
    <ul class="dropdown"> 
    <li> <%= link_to "Profile", edit_user_registration_path, method: :get %> </li> 
    <li> <%= link_to "Log out", destroy_user_session_url, method: :delete %> </li> 
    </ul> 
</li> 
</div> 

</ul> 

posts.js.coffee

jQuery -> 
$("#drop").click (e) -> 
    e.preventDefault() 
    $(this).find(".dropdown").fadeToggle "fast" 

$(document).on "click", (e) -> 
    $trigger = undefined 
    $trigger = $("#drop") 
    $(".dropdown").fadeOut "fast" if $trigger isnt e.target and not $trigger.has(e.target).length 

CSS

.navigation-bar-right .home img:hover, .navigation-bar-right .settings img:hover { opacity: 0.5; } 

Answer 1

什麼

do -> 
isActive = false 
activeValue = 0.5 
disabledValue: 0.3 
$dropDownWrapper = $('#drop') # We could use $(event.delegateTarget) inside the event too but i think its more performant this way 

$dropDownWrapper.on 'click', 'img', (e)-> 
    if isActive = !isActive 
    $dropDownWrapper.fadeTo(activeValue) 
    else 
    $dropDownWrapper.fadeTo(disabledValue) 

我還沒有測試，不知道語法是好的，因爲你原來的例子提供的jsfiddle，我會用這個代碼修改，或測試它的結束，讓我知道，如果它

Answer 2

您可以切換一個名爲「主動」到#drop元素每次用戶點擊它..類，如果你使用jQuery它可能會像這樣：

jQuery -> 
$("#drop").click (e) -> 
    e.preventDefault() 
    $(this).addClass("active").find(".dropdown").fadeIn "fast" 

$(document).on "click", (e) -> 
    $("#drop").removeClass("active").find(".dropdown").fadeOut "fast" 

你也可以像這樣更新css：

.navigation-bar-right .home img:hover, 
.navigation-bar-right .settings img:hover, 
#drop.active .settings img 
{ 
    opacity: 0.5; 
} 

「＃drop.active .settings img」表示在將class active添加到#drop時，將設置圖像設置爲不透明度0.5，所以當通過jQuery刪除active：class時，它將返回0.3除非用戶將鼠標懸停它

其實我更喜歡做改造淡入淡出通過CSS，但因爲你通過jQuery做它，我想這可能是你的一個簡單的解決方案:)

好運！