如果语句使用 jQuery ':visible' 不返回布尔值

Question

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

行

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

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

Answer 1

好吧，你可能混淆了你的优先级并且有太多的想法，你忘记将命令添加到 "else" 语句（隐藏和删除 class）。我还删除了此行下方的 "show"：

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

作为旁注，请尝试使用任务 "To-do:" 注释您的代码并缩进您的代码。

希望对你有所帮助！

编辑： 添加：

$("aside").hide();

之前

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

如果语句使用 jQuery ':visible' 不返回布尔值

If statement using jQuery ':visible' not returning boolean

javascript

jquery

html

if-statement

visible