1

On my page I have four links that show and hide a div each. Take a look here.

The markup for the links is as follows:

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

and

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

The CSS for the fadein class is as follows:

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

And the jQuery that shows/hides the target divs is as follows:

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

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

What I want to happen is that when the target div is open (albums, about, contact, and info, respectively) the link that targets it stays at opacity: 1.0.

I tried this:

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

Where the active class is:

.active {opacity: 1.0;}

But this had two issues: using the close buttons on the panes themselves won't cause the links to go back to semi-transparent, and, in the case of the top 3 links, clicking one link and then another will result in two fully opaque links.

The code for the close buttons is like this:

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

How can I fix these issues? Thanks!

4

2 に答える 2

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');
});
于 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 に答える