2012-04-11 106 views
1

下面的工作很好,當我點擊左側的鏈接,右側面板動畫像slideUp。但是當我再次點擊相同的鏈接,面板隱藏。但我不想隱藏面板。請讓我知道,我需要糾正上面的代碼。我怎樣才能顯示面板,當我點擊第二次鏈接

$(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')。click(function(){ var id = $(this).attr('rel'); var showing = $(id).is(':visible'); $('div.panel')。slideUp('slow'); $('li.link')。removeClass('active'); $(this).addClass('active'); if(!顯示){ \t \t $(id).slideDown('fast',function(){$('html,body')。animate({scrollTop:0},'slow')}); \t $(this).addClass('active'); \t \t \t} }); }); – thirupathi 2012-04-11 07:14:36

+0

而你的HTML?你有現場演示嗎? – 2012-04-11 07:17:12

+0

請參閱鏈接:http://rootloud.com/apologia/new4/apologia-olive/module1.html – thirupathi 2012-04-11 07:20:40

回答

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 2012-04-11 07:34:11