javascript - 使用 jQuery ':visible' 的 if 语句不返回 bool 值

Question

我在这里创建了一个 fiddle https://jsfiddle.net/c2gjh43j/3/ 。我正在使用线路

if ( !target.siblings("aside").is(":visible") ) {

检查目标的“aside”同级元素是否不可见，但它始终返回 true，即使在我的 javascript 显示了“aside”元素之后也是如此。因此我的 else 语句将不会运行。您可以看到，单击 fiddle 中的框将显示隐藏的元素，但当它可见时，您应该能够单击该框并将其隐藏。我做错了什么？

Answer 1

好吧，您可能混合了您的优先级，并且脑子里有太多的想法，您忘记将命令添加到“else”语句(隐藏和删除类)。我还删除了此行下方的“显示”:

$(this.resource).removeClass("active");

我修改了您的代码，希望它能像您想要的那样工作。其他文件原样，仅js文件修改如下:

Services = {
    resource: "#resources-grid .resource",
    resourceTrigger: "#resources-grid .resource .full-link",
    description: ".description",
    init: function() {
        $(this.resourceTrigger).click(this.toggleResource.bind(this));
    },

    toggleResource: function(e) {
        $(this.resource).removeClass("active");

        var target = $(e.target);

        if ( !target.siblings("aside").is(":visible") ) {
            console.log("yes");

            // Edit START
            $("aside").hide();
            // Edit END

            target.siblings("aside").show();
            target.parents(".resource").addClass("active");
        } else {
            console.log("no");
            target.siblings("aside").hide();
            target.parents(".resource").removeClass("active");
        }
    },
}
Services.init();

作为旁注，尝试使用“待办事项:”任务来注释您的代码并缩进您的代码。

希望对你有帮助!

编辑:添加此:

$("aside").hide();

之前

target.siblings("aside").show();