下拉色选择器，切换，点击和超时

Question

我的代码不起作用，我也不知道为什么。

这是一个演示

$(".color").click(function() {
    $(".color-picker").fadeIn(function() {
        var colorClick = $(".color-box").click();
        var timeOut = window.setTimeout(1000);
        if (colorClick || timeOut) {
            $(".color-picker").hide();
        }
    });
});

编辑:清除混乱-当用户单击其中的$(“. colors box”)或下拉$(“.色-选择器”)时，我想隐藏带有颜色的框，或者如果他不这样做，该框应该在几秒钟内隐藏。抱歉，我以为我的密码很清楚。

编辑2:使用@AlvinMagalona的代码我尝试添加超时功能，但没有成功演示

$(".color").click(function(e) {
    e.stopPropagation();
    $(".color-picker").fadeIn(600);

})
.setTimeout(function() {
    if ( $(".color-picker").css('display') != 'none')  {
        $(".color-picker").hide();
    }
},3000);
$(".color-box").click(function (e) {
    e.stopPropagation();
    $(".color-picker").fadeOut(150);
});

或者我认为这样做更好，但仍然没有功能(演示)：

$(".color").click(function(e) {
    e.stopPropagation();
    $(".color-picker").fadeIn(600);
    function timeOut() {
        setTimeout(function() {
            if ( $(".color-picker").css('display') != 'none')  {
                $(".color-picker").hide();
            }
        },3000);
    }
});

$(".color-box").click(function (e) {
    e.stopPropagation();
    $(".color-picker").fadeOut(150);
});

代码的另一部分工作正常，但我没有正确地嵌入setTimeout函数。有人能帮我吗？谢谢!

编辑3: i使其工作：(演示)

$(".color").click(function(e) {
    e.stopPropagation();
    $(".color-picker").toggle(200);

    var timeOut = setTimeout(function() {
            if ( $(".color-picker").css('display') != 'none')  {
                $(".color-picker").hide();
            }
        },6000);
});
$(".color-box").click(function (e) {
    e.stopPropagation();
    $(".color-picker").fadeOut(150);
});

这个有我需要的所有东西-当你打开下拉并点击颜色框隐藏，当你点击下拉框再次隐藏，如果你不这样做，盒子隐藏几秒钟后。我希望这个代码也能对其他人有所帮助。谢谢你们的帮助，各位！

Answer 1

所以要回答我自己的问题，如果你想有一个最简单的下拉菜单，你选择一些东西，然后下拉框隐藏自己。这是一个演示，下面是代码：

$(".color").click(function(e) {
    e.stopPropagation();
    $(".color-picker").toggle(200);

    var timeOut = setTimeout(function() {
            if ( $(".color-picker").css('display') != 'none')  {
                $(".color-picker").hide();
            }
        },6000);
        console.log("timeOut");
});
$(".color-box").click(function (e) {
    e.stopPropagation();
    $(".color-picker").fadeOut(150);
});

特别感谢@AlvinMagalona，我重写了他提议的代码，使其适合我的情况。

Answer 2

在选择颜色后，是否试图隐藏该框？如果你这么做了，试试这段代码。

$(document).ready(function() {
    $(".color").click(function(e) {
        e.stopPropagation();
        $(".color-picker").fadeIn(600);
        setTimeout(function() {
            if ( $(".color-picker").css('display') != 'none')  {
                $(".color-picker").hide();
            }
        },3000);
    });

    $(".color-box").click(function (e) {
        e.stopPropagation();
        $(".color-picker").fadeOut(150);
    });
});

Answer 3

试着-

$(document).ready(function() {
    $(".color p").click(function() {
        $(".color-picker").fadeIn();
    });
    $(".color-box").on('click', function() {
        $('.color-picker').fadeOut();
    })
});

它只需打开包含颜色框的div，单击该框就会隐藏它，从而产生转换效果。