使用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。