jquery - 当您单击远离虹膜颜色选择器时，如何关闭它？

Question

我正在使用iris colour picker在 WordPress 插件中。我可以让它显示，然后在关联的输入中显示单击的值，但是有一个问题......

我无法摆脱这个盒子!有没有办法让该框在单击时消失？

我正在使用这个简单的调用来调用 iris -

jQuery(document).ready(function($){
    $('.colour-picker').iris();
});

常识告诉我，我应该能够将其作为选项传递给 .iris() 函数来满足此特定需求，但我在docs .

我发现的壁橱是，您可以调用 hide 方法，但它列出的只是 $(element).iris('hide');，其中完全没有解释如何将其链接到第一步调用 iris 的特定输入，或者如何检测用户是否点击了 iris

>

有人使用iris并且知道我如何实现我想要做的事情吗？谢谢。

附加 - 这是 JS fiddle这说明了所描述的问题。调用iris的JS可以在JS部分的底部找到。

Answer 1

你可以尝试这样的事情:

jQuery(document).ready(function ($) {    
    $('.colour-picker').iris();    
    $(document).click(function (e) {
        if (!$(e.target).is(".colour-picker, .iris-picker, .iris-picker-inner")) {
            $('.colour-picker').iris('hide');
            return false;
        }
    });
    $('.colour-picker').click(function (event) {
        $('.colour-picker').iris('hide');
        $(this).iris('show');
        return false;
    });
});

Updated fiddle