jquery - 链接在悬停时淡入 - 如何让它们在目标可见时保持不透明？

Question

在我的页面上，我有四个链接，每个链接显示和隐藏一个 div。看看here .

链接的标记如下:

<li class="togglelink fadein button" data-block="albums" id="togglealbums">Albums</li>
<li class="togglelink fadein button" data-block="about" id="toggleabout">About Me</li>
<li class="togglelink fadein button" data-block="contact" id="togglecontact">Contact</li>

和

<img src="images/info.png" class="button nav_button fadein toggleinfo" id="info" alt="Show Info Pane" title="Show Info Pane">

fadein 类的 CSS 如下:

.fadein {opacity:0.5; transition:opacity 0.5s; -webkit-transition:opacity 0.5s; -moz-transition:opacity 0.5s; -ms-transition:opacity 0.5s;}
.fadein:hover {opacity:1.0;}

而显示/隐藏目标div的jQuery如下:

$('.togglelink').on('click',function() {
  var id = $(this).data('block');
  $('#'+id).fadeToggle('slow').siblings('.toggleblock').fadeOut('fast');
});

$('.toggleinfo').click(function() {
  $('.info').fadeToggle('slow');
});

我想要发生的是，当目标 div 打开时(albums、about、contact 和 info，分别)以它为目标的链接保持在 opacity: 1.0。

我试过这个:

$('.togglelink,.toggleinfo').click(function() {
  $(this).toggleClass('fadein active');
});

active 类在哪里:

.active {opacity: 1.0;}

但这有两个问题:使用 Pane 本身的关闭按钮不会导致链接返回到半透明状态，并且在前 3 个链接的情况下，单击一个链接然后再单击另一个链接将导致在两个完全不透明的链接中。

关闭按钮的代码是这样的:

<img src="images/close_pane.png" class="togglelink fadein close_pane button" data-block="albums" alt="Close Album List" title="Close Album List">

我该如何解决这些问题？谢谢!

Answer 1

$('.togglelink,.toggleinfo').click(function() {
    $(this).siblings('.active').toggleClass('fadein active');
    $(this).toggleClass('fadein active');
});

$('.close_pane').click(function(){
    $('li[data-block="'+ $('this').data('block') +'"]').removeClass('active').addClass('fadein');
});