从左侧滑入切换

Question

我正在尝试从 Shopify 商店的右侧菜单中创建此幻灯片。我可以使用 slideToggle() 打开和关闭 div，但是当我尝试添加一些其他功能或效果时，它根本不起作用。

我也尝试过这样的事情：

.toggle('slide', direction: 'right', 500)

另外，如果您在#sign div 之外单击，我希望隐藏功能起作用。有人知道使我能够做到这一点的功能吗？

<script type="text/javascript"> 
$(document).ready(function(){

    $("#sign").hide();
    $(".login-show1").show();

    $('.login-show1').click(function(){
        $("#sign").slideToggle();
    });

});

</script>

<a class="login-show1">SIGN IN</a>
<div id="sign">
   <div id="exit" href="#" class="login-show1">x</div>
   Here is sign in form
</div>

Answer 1

要使以下代码正常工作，您必须包含jQuery UI

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

将您的脚本更改为：

$(document).ready(function(){

    $("#sign").hide();
    $(".login-show1").show();


    $(".login-show1").on("click", function() {
        var slided = false;

        $(document).on('click', function(){
            $('#sign').toggle('slide', {direction:'left'}, 700);
            slided = !slided;
            if(!slided) {
                $(document).off('click');
            }
        });

    });

});

Answer 2

$('.login-show1').click(function(){
    $('#myDiv').toggle('slide', {direction : right}, 500, function () {
        // callback when animation completed, add other effect here
    });
});

$('#myDiv').click(function(e){
    e.stopPropagation();
});

$('body').click(function(){
    /* 
    hide $('#myDiv') with:
    - $('myDiv').hide()
    or
    - $('#myDiv').toggle('slide', {direction : left})
    */
});