Jquery 从左切换滑入

我正在尝试从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>

$（文档）.ready（函数（）{
$（“#符号”）.hide（）；
$（“.login-show1”）.show（）；
$（'.login-show1'）。单击（函数（）{
$（“#符号”）.slideToggle（）；
});
});
登录
x
这是签到表

要使下面的代码正常工作，您必须包括

jQuery UI

将脚本更改为：

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

    });

});

---

看看这个链接。谢谢@ShukhratRaimov，但我不知道当打开div的链接不在打开div按钮旁边时如何使用它。添加到head的JQuery Ui和脚本已更改。可以使用.login-show1按钮打开sign div，但不能滑动，也不能使用.login.show1@kumsCan再次关闭它。您提供了指向所使用的整个HTML的链接吗？在包含jQuery后包含jQuery UI。订单很重要，谢谢！非常有用。但可能还有另一个问题。如果我有其他的“菜单”将从右边滑入，它将相互干扰。可能与“click”函数有关（）我还意识到，如果我在打开div之前单击页面上的任何位置，div就会打开@kumsI对我原来的答案做了一个修改。检查它是否适合你。

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

    });

});