jQuery - 다른 이벤트를 지연시키면서 하나의 이벤트를 실행하는 방법?

Question

jQuery 초보자가 약간있어, 조금이라도 간단하다면 용서해주세요! 슬라이딩 헤더 시스템은 아코디언 메뉴와 매우 흡사합니다. 그러나 요소를 열고 닫는 링크는 HTML의 다른 부분에 있으므로 아코디언 튜토리얼은 모두 작동하지 않습니다.

내가 지금까지 가지고있다 : HTML :

<div class="drawer" id="drawer_about"></div> 
<div class="drawer" id="drawer_contact"></div> 
<div class="drawer" id="drawer_hire"></div> 
<div class="drawer" id="drawer_social"></div> 

... 

<ul class="navigation"> 
<li><a href="#" class="show_hide_about"><span>About Me</span></a></li> 
<li><a href="#" class="show_hide_contact"><span>Get In Touch</span></a></li> 
<li><a href="#" class="show_hide_hire"><span>Hire Me</span></a></li> 
<li><a href="#" class="show_hide_social"><span>Social Networks</span></a></li> 
</ul> 

그리고 jQuery를이 :

$(document).ready(function(){ 
     $("#drawer_about").hide(); 
     $("#drawer_contact").hide(); 
     $("#drawer_hire").hide(); 
     $("#drawer_social").hide(); 

     lastBlock = ("#drawer_hire"); 


    $('.show_hide_about').click(function(){ 
     $("#drawer_about").slideToggle(700); 
     $(lastBlock).hide(700); 
     lastBlock = ("#drawer_about"); 
    }); 

    $('.show_hide_contact').click(function(){ 
     $("#drawer_contact").slideToggle(700); 
     $(lastBlock).hide(700); 
     lastBlock = ("#drawer_contact"); 
    }); 

    $('.show_hide_hire').click(function(){ 
     $("#drawer_hire").slideToggle(700); 
     $(lastBlock).hide(700); 
     lastBlock = ("#drawer_hire"); 
    }); 

    $('.show_hide_social').click(function(){ 
     $("#drawer_social").slideToggle(700); 
     $(lastBlock).hide(700); 
     lastBlock = ("#drawer_social"); 
    }); 
}); 

내가 여기 OTT을하는 건가? 이 작업을 수행하는 더 간단한 방법이 있습니까?

내가 가진 주된 문제는 모든 기능입니다. 그러나 ABOUT ME 패널이 열려 있고 사용자가 HIRE ME 링크를 클릭하면 이상한 결과가 발생합니다. 이 상황에서 내가 원하는 것은 ME 소개 패널이 접히는 것, 그리고 HIRE ME 패널이 접히는 것입니다. 감각, 감사 사람을 만드는

희망,

알렉스

Answer 1

이 같은 링크 설정했던 : <a href="" class="show" data-section="contact">asdf</a>

를 그런 다음 당신이 필요로하는 모든입니다

$('.show').click(function(ev) { 
    var $visibleDrawer = $('.drawer:visible').eq(0); // make sure to get only one (or 0) drawer 

    // set currentSection to the drawer's id or empty if no drawer was found 
    var currentSection = $visibleDrawer.length?$visibleDrawer.attr('id').replace('drawer_',''):''; 

    $('.drawer').slideUp(700); 
    $('a.show').removeClass('active'); // reset all link classes 


    (function(clickedSection, $link){ //<-- pass the active link to have access to it inside the closure 
     if(currentSection != clickedSection){ 
      $link.addClass('active');  // set active class on clicked link 
      setTimeout(function() { 
       $('#drawer_'+clickedSection).slideDown(700); 
      }, ($visibleDrawer.length?700:0)); // set the timeout to 0 if no drawer visible 
     } 
    })($(this).data('section'),$(this)); //<-- 

    ev.preventDefault(); 
}); 

Answer 2

.animate()을 사용하면 애니메이션 끝에서 실행될 콜백 함수를 구문 분석하거나 을 사용하여 t를 추적 할 수 있습니다 그는 실행 요소와 요소를 가리킨다. 첫 번째 방법

$('#foo').animate(function() { 
    // do stuff with foo 
}, duration, easing, function() { 
    $('#bar').animate(function() { 
     // do stuff with bar 
    }) 
}); 

Answer 3

Here의 일부 의사 코드는 jsFiddle 에 어떻게 작동하는지에 대한 링크입니다

내가이 당신과 함께 일 것이라고 생각 (당신이 jQuery를 할 프레임 워크를 선택해야합니다) :

를

$(document).ready(
     function(){ 
      $('.header').click(function(){ 
       //To hide all other contents 
       $('.content').slideUp('slow'); 
       var num=$(this).attr('id').split('_')[1]; 
       //And show this one .. 
       $('#content_'+num).slideDown('slow'); 
      }); 

     } 
    ); 

HTML은 다음과 같아야합니다

    <div class="header" id="title_111"><a href="#">Category 1</a></div> 
        <div class="content" id="content_111"> 

        </div> 

        <div class="header" id="title_112"><a href="#">Category 2</a></div> 
        <div class="content" id="content_112"> 

        </div> 

        <div class="header" id="title_113"><a href="#">Category 3</a></div> 
        <div class="content" id="content_113"> 

        </div> 

        <div class="header" id="title_114"><a href="#">Category 4</a></div> 
        <div class="content" id="content_114"> 

        </div> 

        <div class="header" id="title_115"><a href="#">Category 5</a></div> 
        <div class="content" id="content_115"> 

        </div> 

        <div class="header" id="title_116"><a href="#">Category 6</a></div> 
        <div class="content" id="content_116"> 

        </div>