jquery - 从左侧滑入切换

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');
            }
        });

    });

});