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

滑出分区缩放

2 个答案: