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

您可以切换名为＆＃34; active＆＃34;每次用户点击它时都会#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; 
}

＆＃34; #drop.active .settings img＆＃34;表示当将类激活添加到#drop时，将设置图像设置为不透明度为0.5，因此当通过jQuery删除：active：class时，除非用户将鼠标悬停在其上，否则它将返回0.3

我实际上更喜欢通过CSS转换来淡入淡出，但是由于你是通过jQuery做到的，我认为这对你来说可能更容易解决：）

祝你好运！

Answer 2

怎么样？

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，我将使用此代码对其进行修改，或者在您的结尾对其进行测试并告诉我它的工作原理

Rails - 下拉菜单图标上的不透明度切换？

2 个答案: