javascript - 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

每次用户单击它时，您都可以将名为“active”的类切换到#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"表示当类 active 添加到 #drop 时，目标设置图像的不透明度为 0.5，因此当通过 jQuery 删除 :active: 类时，它将返回到 0.3，除非用户将鼠标悬停在上面

我实际上更喜欢通过 CSS 转换来实现淡入淡出，但由于您是通过 jQuery 实现的，所以我认为这对您来说可能是一个更简单的解决方案:)

祝你好运!