jQuery click 이벤트를 사용하여 div를 아래로 슬라이드하고 다음 div를 뷰포트 밖으로 밀어 넣으십시오.

Question

jQuery slide # content2를 아래로 만들고 # content1을 # content1이 실제로 보이도록 만드는 동안 그걸 대체하는 방법을 찾으려고합니다. # content2에 의해 아래로 밀어 내려 ...보기에서 제거 ...

# content2 replace # content1을 만들기 위해 클릭 한 동일한 단추는 # content2를 # content1로 바꿔서 역 효과를 수행해야합니다. 서로 방해하지 마라.

내가 jQuery와 잘 맞지 않으므로이 방법이 잘못되었다는 것을 확신하지만 다음은 시도한 것이다.

$(document).ready(function() { 
$('#click').click(function() { 
if($('#content1').is(':visible')) { 
    $('#content1').slideUp(); 
} 
else { 
    $('#content2').slideDown(); 
} 
}).click(function() { 
if($('#content1').is(':visible')) { 
    $('#content2').slideDown(); 
} 
else { 
    $('#content1').slideUp(); 
} 
}); 

});

Answer 1

클릭 한 번만 바인딩하면 슬라이드 효과를 전환 할 수 있습니다. 당신은 지금 당신이 동일한 요소에 두 개의 클릭 이벤트 핸들러를 결합하려고하는이

$(document).ready(function() { 

    $('#click').click(function() { 
    $('#content1').slideToggle(); 
    $('#content2').slideToggle(); 
    } 
} 

Answer 2

처럼 뭔가를 시도 할 수 있습니다. 이것은 당신이 시도하는 방식이 가능하지 않지만 네임 스페이스 이벤트로는 : 다음 $(#click).bind('click.event1') 나중에 당신이 하나의 함수에서 모두 할 수 있습니다 그러나 .bind('click.event2')

:

$(document).ready(function() { 
    // Pre selected for increased speed 
    var content1 = $('#content1'); 
    var content2 = $('#content2'); 

    $('#click').click(function() { 
     content1.slideToggle(); 
     content2.slideToggle(); 
    }); 
}); 

그것은 PERFEKT 동기화가 맞지 않습니다 아마도 괜찮아 보일 것입니다.