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'); 
    }); 
} 

과 성능 (div의 '내용, div의'스타일, 반투명 배경 등, 방화범이 켜져) 일의 많은에 따라 달라집니다.