当你点击它时如何关闭虹膜颜色选择器？

Question

我正在使用iris colour pickerWordpress插件.我可以让它显示然后显示相关输入中的点击值就好了,但是有问题......

我无法摆脱盒子!当你点击它时,有没有办法让盒子消失？

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

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

常识告诉我,我应该能够将此作为.iris()该特定需求的函数的选项传递,但我在文档中找不到对此类选项的任何引用.

我找到的壁橱是你可以调用一个hide方法,但它列出的是$(element).iris('hide');,没有解释如何将它链接到iris第一步调用的特定输入,或者如何检测用户是否已经点击了从iris

有没有人使用iris并知道如何实现我想做的事情？谢谢.

附加 - 这是一个JS小提琴,演示了所描述的问题.调用的JS iris可以在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;
    });
});

更新了小提琴