JQuery 슬라이드 토글 작동

Question

이 설정에 문제가 있습니다. '서비스'링크를 클릭하면 드롭 다운됩니다.하지만 동일한 '서비스'링크를 사용하여 드롭 다운/슬라이드 다운 영역을 닫으면 다시 열 때 컨텐트에 맞게 확장/축소되지 않습니다. 크기가 고정되고, 슬라이드 아래쪽에있는 '닫기'링크로 닫으면 마치 잘 작동합니다.

jsFiddle 참조

$(document).ready(function(){ 
     $("#closebtn").click(function(){ 
      $(".expandable").stop().slideUp().delay(600); 
      $(".expandable2").stop().slideUp().delay(600); 
      $("#taglinecontainer").stop().slideToggle({queue: false}).delay(600); 
     }); 
     $("#toggleservices").click(function(){ 
      $(".expandable").slideUp().delay(600); 
      $("#fullservices").stop().slideToggle({queue: false}); 
      $("#taglinecontainer").stop().slideToggle({}).delay(600); 
     }); 
     $("#togglesectors").click(function(){ 
      $(".expandable").slideUp().delay(600); 
      $("#fullsectors").slideToggle({queue: false}); 
      $("#taglinecontainer").slideToggle({}).delay(600); 
     }); 
    }); 
    $(document).ready(function(){ 
     $("#togglestrategyblurb").hoverIntent(function(){ 
      $(".expandable2").slideUp(); 
      $("#strategyblurb").slideToggle(); 
     }, function(){ 
     }); 
     $("#toggledesignblurb").hoverIntent(function(){ 
      $(".expandable2").slideUp(); 
      $("#designblurb").slideToggle(); 
     }, function(){ 
     }); 
     $("#toggleprblurb").hoverIntent(function(){ 
      $(".expandable2").slideUp(); 
      $("#prblurb").slideToggle(); 
     }, function(){ 
     }); 
     $("#togglewebblurb").hoverIntent(function(){ 
      $(".expandable2").slideUp(); 
      $("#webblurb").slideToggle(); 
     }, function(){ 
     }); 
    }); 

에 대한 (, 서비스를 클릭 링크 위로 마우스를 이동하고 내 말은 문제를 보여을 열고 다시 링크 위에 마우스를 올려 놓고 다시 다음을 닫습니다 다시 서비스를 클릭)

Answer 1

에 overflow을 추가 Sample

$("#toggleservices").click(function(){ 

    $("#fullservices").stop().slideToggle({queue: false}); 
    $("#taglinecontainer").stop().slideToggle({}).delay(600); 
}); 

Answer 2

이이 문제를 해결할 수 있는지 확인하여 header

header { 
    background: rgba(0, 0, 0, 0.6); 
    min-height: 50px; 
    overflow:auto; 
}