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

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

关闭按钮的代码如下：

<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

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

另外，你可以删除fadein类并只使用jQuery的fadeIn()吗？ jQuery的fadeIn（）会影响标签上的内联样式，这可能就是它无法正常工作的原因。

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

Answer 2

$('.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');
});

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

2 个答案: