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

Question

我在这里创建了一个小提琴https://jsfiddle.net/c2gjh43j/3/。我正在使用这条线

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

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

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