javascript - 选择当前菜单项时，其他菜单项淡出

Question

例子:

我在“联系”页面。我希望“联系人”菜单项的不透明度为 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。

你能帮帮我吗？

Answer 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 中使用 anchor 标记是一种不好的做法。 ul 中应该只有 li-tags。因此，我将 a-tag 放在每个列表中。

E:更新后，您说您希望当前页面的不透明度始终为 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');
});