1

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

链接的标记如下：

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

该类的 CSSfadein如下：

.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;}

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

关闭按钮的代码如下：

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

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

4

2 回答 2

1

var id = $(this).data('block');应该var id = $(this).attr('data-block');

另外，您可以删除fadein该类并仅使用 jQueryfadeIn()吗？jQuery 的 fadeIn() 会影响标签上的内联样式，这可能是它不起作用的原因。

$('.togglelink').click(function() {
  var id = $(this).attr('data-block');
  $('#'+id).fadeToggle('slow');
  $(this).siblings().fadeOut('fast');
});
于 2012-11-19T05:48:09.913 回答
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');
});
于 2012-11-19T05:48:47.710 回答