javascript - 滑出分区缩放

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){ /* 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小提琴

Answer 2

你可以尝试这样的事情： -

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

JS小提琴