2012-04-11 16 views
1

以下は、左側のリンクをクリックすると表示され、右側のパネルはスライドアップのようにアニメーション表示されます。しかし、同じリンクでもう一度クリックすると、パネルは非表示になります。しかし、私はパネルを隠したくない。上記のコードを修正する必要があることを教えてください。リンクでもう一度クリックしたときにパネルを表示するには

$(function() { 
    $('div.panel').hide(); 
    $('div.panel:first').addClass('active').show(); 
    $('li.link').click(function() { 
     var id = $(this).attr('rel'); 
     var showing = $(id).is(':visible'); 
     $('div.panel').slideUp('slow'); 
     $('li.link').removeClass('active'); 
     if (!showing) { 
      $(id).slideDown('fast', function() { 
       $('html,body').animate({ 
        scrollTop: 0 
       }, 'slow') 
      }); 
      $(this).addClass('active'); 
     } 
    }); 
}); 
+0

$(関数(){ $( 'div.panel')非表示(); \t $( 'div.panel:最初の')addClass( 'アクティブ')を表示(); $( 'li.link')。表示(function(){ var id = $(this).attr( 'rel'); var showing = $(id).is( ':visible'); $( 'li.link')removeClass( 'active'); $(this).addClass( 'active'); if(!)表示){ \t \t $(id).slideDown( 'fast'、function(){$( 'html、body')}アニメーション({scrollTop:0}、 'slow')}); \t $(this).addClass( 'active'); \t \t \t} }); }); – thirupathi

+0

あなたのHTMLは?ライブデモはありますか? –

+0

リンクを参照してください:http://rootloud.com/apologia/new4/apologia-olive/module1.html – thirupathi

答えて

0
ifブロック内 .slideUpコールを移動し

。現在のページに対応するリンク以外のリンクをクリックした場合にのみ、操作を行います。 。。。

$('li.link').click(function() { 
    var id = $(this).attr('rel'); 
    var showing = $(id).is(':visible'); 
    $('li.link').removeClass('active'); 
    $(this).addClass('active'); 
    if (!showing) { 
     $('div.panel').slideUp('slow'); 
     $(id).slideDown('fast', function() { 
      $('html,body').animate({ 
       scrollTop: 0 
      }, 'slow') 
     }); 
     $(this).addClass('active'); 
    } 
}); 
+0

ありがとうジョン、私に素晴らしい仕事... – thirupathi

関連する問題