슬라이드 아웃 영역 확대/축소

Question

$(function() { 
    $("#clickme").click(function() { 
     if($(this).parent().hasClass("popped")){ 
     $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}).removeClass("popped"); 
    }else { 
     $(this).parent().animate({right: "0px" }, {queue: false, duration: 500}).addClass("popped");} 
    }); 


    $(document).on('click',function(e){ 
     if($('#slideout').hasClass("popped")){ 
     $('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped"); 
     } 
    }); 

    $('#slideout').on('click',function(e){ 
     e.stopPropagation(); 
    }); 

}); 

<div id="slideout"> 
    <div id="slidecontent"> 
     Yar, there be dragonns herre! 
    </div> 
    <div id="clickme"> 
    </div> 
</div> 

div 밖으로 슬라이드하기위한 것입니다. 하지만이 스크립트를 사용하면 웹 사이트를 확대 할 때 가로 스크롤러가 표시되지 않습니다. 어떻게 해결할 수 있습니까? 감사합니다. .

Answer 1

이 뭔가를 시도 할 수 있습니다 : -

$(document).on('click',function(e){ 
     if($('#slideout').hasClass("popped")){ 
     $('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped"); 
     } 
    }); 

JS FIDDLE

Answer 2

$(document).on('click',function(e){ /* Hide on Outside Click*/ 
    if($('#slideout').hasClass("popped")){ 
     $('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped"); 
    } 
}); 

$('#slideout').on('click',function(e){ /*Ignore 'Hide on Outside Click' on clicking #slideout element*/ 
    e.stopPropagation(); 
}); 

이 코드가 작동해야

귀하의 최종 코드는 다음과 같습니다

$(function() { 
    $("#clickme").click(function() { 
     if($(this).parent().hasClass("popped")){ 
     $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}).removeClass("popped"); 
    }else { 
     $(this).parent().animate({right: "0px" }, {queue: false, duration: 500}).addClass("popped");} 
    }); 


    $(document).on('click',function(e){ 
     if($('#slideout').hasClass("popped")){ 
     $('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped"); 
     } 
    }); 

    $('#slideout').on('click',function(e){ 
     e.stopPropagation(); 
    }); 

}); 

JS FIDDLE