使用jQuery點擊顯示/隱藏div

Question

我有4個div，並且點擊導航我想展示其中一個並隱藏其他人。我有它的工作，但我覺得它不如我所知它可能是光滑的，它肯定是我的代碼，需要重構！這裏有我的。

$('#details-speakers').click(function() { 

    $('#home').slideUp('slow', function() {}); 
    $('#sessions-content').slideUp('slow', function() {}); 
    $('#cases-content').slideUp('slow', function() {}); 
    $('html,body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing"); 
    $('#speakers-content').slideDown('slow', function() { 
     $('#details-speakers').addClass('selected'); 
     //Remove other classes 
     $('#details-sessions').removeClass('selected'); 
     $('#details-cases').removeClass('selected'); 
     $('#details-workshops').removeClass('selected'); 
    }); 
}); 
$('#details-sessions').click(function() { 

    $('#home').slideUp('slow', function() {}); 
    $('#speakers-content').slideUp('slow', function() {}); 
    $('#cases-content').slideUp('slow', function() {}); 
    $('html,body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing"); 
    $('#sessions-content').slideDown('slow', function() { 
    $('#details-sessions').addClass('selected'); 
     //Remove other classes 
     $('#details-speakers').removeClass('selected'); 
     $('#details-cases').removeClass('selected'); 
     $('#details-workshops').removeClass('selected'); 
    }); 
}); 
$('#details-cases').click(function() { 

    $('#home').slideUp('slow', function() {}); 
    $('#speakers-content').slideUp('slow', function() {}); 
    $('#sessions-content').slideUp('slow', function() {}); 
    $('html,body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing"); 
    $('#cases-content').slideDown('slow', function() { 
    $('#details-cases').addClass('selected'); 
     //Remove other classes 
     $('#details-speakers').removeClass('selected'); 
     $('#details-sessions').removeClass('selected'); 
     $('#details-workshops').removeClass('selected'); 
    }); 
}); 

Answer 1

平滑或缺乏不是你的代碼的錯。有些瀏覽器速度很慢。這不是JS可以修復的東西。

您可以縮短代碼，但我不認爲會有任何重大的性能改進。

$('#details-speakers').click(function() { 
    $('#home, #sessions-content, #cases-content').slideUp('slow'); 
    $('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing"); 
    $('#speakers-content').slideDown('slow', function() { 
     $('#details-speakers').addClass('selected'); 
     //Remove other classes 
     $('#details-sessions, #details-cases, #details-workshops').removeClass('selected'); 
    }); 
}); 

$('#details-sessions').click(function() { 
    $('#home, #speakers-content, #cases-content').slideUp('slow'); 
    $('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing"); 
    $('#sessions-content').slideDown('slow', function() { 
    $('#details-sessions').addClass('selected'); 
     //Remove other classes 
     $('#details-speakers, #details-cases, #details-workshops').removeClass('selected'); 
    }); 
}); 

$('#details-cases').click(function() { 
    $('#home, #speakers-content, #sessions-content').slideUp('slow'); 
    $('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing"); 
    $('#cases-content').slideDown('slow', function() { 
    $('#details-cases').addClass('selected'); 
     //Remove other classes 
     $('#details-speakers, #details-sessions, #details-workshops').removeClass('selected'); 
    }); 
}); 

Answer 2

如果它是你正在尋找一個更簡潔的方法怎麼是這樣的：

$(".my4Divs").click(function() { 
    var self = this; 
    $(".my4Divs").each(function() { 
     if(self == this) { 
      $(self).addClass("selected"); 
      ... 
      ... 
      return; 
     } 
     $(this).removeClass("selected"); 
     ... 
     ... 
    }); 
}); 

Answer 3

按Ctrl + C和Ctrl + V編程導致直下地獄......我覺得你可以做類似的東西：

var divs = $('#details-speakers, #details-sessions, #details-cases'); 

divs.click(function() { 
    divs.not(this).add('#home').slideUp('slow'); 
    // animation with home and body 
    $(this).slideDown('slow', function() { 
     $(this).addClass('selected'); 
     divs.not(this).removeClass('selected'); 
    }); 
} 

和性能取決於很多事情（螢火蟲是，申報單的內容，申報單的風格，半透明的背景等） - 而不僅僅是可憐的JavaScript。