带有切换点击和超时的下拉颜色选择器

Question

我的代码不工作，我不知道为什么。

这是一个demo

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

编辑： 消除混淆 - 我想在用户单击其中一个 $(".color-box") 或下拉菜单 $(".color-picker")，或者如果他不这样做，该框应该会在几秒钟内隐藏起来。抱歉，我认为我的代码很清楚。

编辑 2： 使用@AlvinMagalona 的代码我尝试添加超时功能但没有成功 demo

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

或者我认为这种方式更好，但仍然不起作用(demo):

$(".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： 我成功了：(demo)

$(".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

您是想在 select 颜色后隐藏框吗？如果这样做，请尝试此代码。

$(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 2

试试 -

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

它将简单地打开包含颜色框的 div，单击该框将使用过渡效果将其隐藏。

Answer 3

因此，如果您想拥有最简单的下拉菜单，您可以在其中选择内容，然后下拉框会自行隐藏，那么请回答我自己的问题。这里是一个demo，这里是代码：

$(".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，我重写了他建议的代码以使其适用于我的情况。

带有切换点击和超时的下拉颜色选择器

Dropdown colorpicker with toggle click and timeout

javascript

jquery

show-hide