选择当前菜单项时，其他菜单项淡出答案

【问题标题】：When current menu item is selected, others fade选择当前菜单项时，其他菜单项淡出
【发布时间】：2014-09-08 08:03:46
【问题描述】：

例子：

我在“联系”页面。我希望“联系人”菜单项的不透明度为 100%，其余的不透明度为 30%。我在“关于”页面。我希望“关于”菜单项的不透明度为 100%，其余的为 30%。

我的菜单是这样的：

HTML：

<ul class="menu">
<li class="menu-item menu-item-1"><a href="some_link">Home</a></li> 
<li class="menu-item menu-item-2 current-menu-item"><a href="some_link">Contact</a></li> 
<li class="menu-item menu-item-3"><a href="some_link">About</a></li>
</ul>

CSS：

.menu .menu-item-1 {background: url('images/image1.jpg');}
.menu .menu-item-1 a {background: url('images/transparent-black-border-1.png') no-repeat;  background-position: bottom;}
.menu .menu-item-2 {background: url('images/image2.jpg');}
.menu .menu-item-2 a {background: url('images/transparent-black-border-2.png') no-repeat;  background-position: bottom;}
.menu .menu-item-3 {background: url('images/image3.jpg');}
.menu .menu-item-3 a {background: url('images/transparent-black-border-3.png') no-repeat;  background-position: bottom;}

我想要什么： 当 .current-menu-item 类出现时，该菜单项的不透明度应为 100，其他的为 30%。 .menu .menu-item-1 背景图像也应该褪色，不仅仅是 a-tag。

你能帮帮我吗？

【问题讨论】：

你在这个空间里查过什么吗？这个功能已经有很多 jquery 插件了

标签： javascript jquery html css

【解决方案1】：

你可以使用 not() 函数..

JSFiddle

JS：

$(".menu-item").on('mouseenter', function(){
  $(".menu-item").find('a').not($(this).find('a')).css('opacity','0.3')
}).on('mouseleave', function(){
  $(".menu-item").find('a').css('opacity','1');
});

HTML：

<ul class="menu">
  <li class="menu-item"><a href="some_link">Some text</a></li> 
  <li class="menu-item"><a href="some_link">Some text</a></li> 
  <li class="menu-item"><a href="some_link">Some text</a></li>
</ul>

注意：在 ul 中使用锚标记是一种不好的做法。 ul 中应该只有 li-tags。因此，我将 a-tag 放在每个列表中。

E：更新后，您说希望将当前页面始终设置为 opacity 1，其余页面设置为 0.3。在悬停时，您希望悬停的 li 元素也变为 1。

Updated Fiddle

在您的 HTML 标记中，您可以在每个页面上为所需的菜单项设置活动类。将该类的不透明度设置为 1，将其余菜单项的不透明度设置为 0.3。悬停时不要触摸活动类，而是其他类。

HTML：

<ul class="menu">
  <li class="menu-item active"><a href="some_link">Home</a></li> 
  <li class="menu-item"><a href="some_link">Page1</a></li> 
  <li class="menu-item"><a href="some_link">Page2</a></li>
</ul>

CSS：

.menu-item {
  opacity: 0.3;
}
.active {
  opacity: 1;
}

JS：

$(".menu-item").on('mouseenter', function(){
  $(this).not('.active').css('opacity','1')
}).on('mouseleave', function(){
  $(this).not('.active').css('opacity','0.3');
});

【讨论】：

是的，抱歉，a 标签在 li 标签内。您的代码的作用：当我将鼠标悬停在一个项目上时，该项目保持其不透明度，而其他项目的不透明度为 0.3。我想要的是当我进入一个具有 .current-menu-item 类的菜单项时，当前菜单项应该保持 100% 的不透明度，其余的保持 30% 的不透明度，而不仅仅是悬停。我将编辑我的帖子以便更好地理解。
@Pufarina 然后添加这个 CSS a.current-menu-item { opacity: 1; } & .menu a { opacity: .3 }。在活动链接上设置 current-menu-item 类。这是一个很好的答案。我只想补充一点，而不是链接 jquery 方法，传递一个对象会更有效，例如。 .on({mouseenter: function() {...}, mouseleave: function() {...})
我一开始就这样做了（使用 CSS）。问题是在 HOME 页面上，Home 菜单项的不透明度为 100%，而其他的为 30%。我希望当我在我的主页上时，我的所有菜单项都是 100% 的不透明度。为此，我认为我需要 jQuery。
我编辑了帖子以使您的“主页”/当前页面保持不透明度 1。

【解决方案2】：

要更改不透明度，您可以执行以下操作：

$(".menu-item").hover(function(){
    $(".menu-item").each(function(){
         $(this).css("opacity", 0.8);
    })
    $(this).css("opacity", 1);
});

为了更简单的选择器，最好将您的 HTML 结构更改为：

<ul class="menu">
    <li class="menu-item menu-item-1">...</li> <a href="some_link">Some text</a>
    <li class="menu-item menu-item-2">...</li> <a href="some_link">Some text</a>
    <li class="menu-item menu-item-3">...</li> <a href="some_link">Some text</a>
</ul>

要将图像更改为黑白/灰度，您需要使用 HTML5 Canvas，并使用此jQuery.BlackAndWhite..

【讨论】：