隐藏选择器始终决定元素可见，即使元素不可见

Hidden selector always deciding that an element is visible, even when its not

本文关键字：元素 选择器 决定 隐藏      更新时间：2023-09-26

我正在为即将到来的项目做的一件事是调用/工具提示系统。理论上，这只是一件简单的小事。你接受一些这样的标记：

<script src='jQuery 1.10.1'></script>
<a href='#' id='callout-link'>Click Me</a>
<div id='callout-id' class='callout hidden'>
    This is my tooltip text.
</div>
/* CSS Styling... */
.callout {
     position: absolute;
     z-index: 2;
}
.hidden {
     display: none;
}

并将其绑定到JavaScript中，这样每当您单击某个链接时，它就会切换可见性。

// ...Page Script...
var $link = $('#callout-link'),
    $callout = $('#callout-id');
$(document).ready(function () {
    var callout = new MyCallout($link, $callout);
    callout.bindToControlClick();
});
// ...Object Definition...
var MyCallout = function ($control, $callout) {
    init();
    // Public Scope...
    var pub = {};
    pub.$actionControl = $control;
    pub.$callout = $callout;
    pub.bindToControlClick = function () {
        pub.$actionControl.click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            toggleCallout();                
        });
    }
    // Private Scope...
    function init() {
        // The callout-content subdiv is necessary for other operations that are
        // likely not relevant to the problem I am encountering.
        if($callout.children('.callout-content').length == 0)
            $callout.wrapInner('<div class="callout-content" />');
    }
    function toggleCallout() {
        if(pub.$callout.is(':hidden')) {
            // Show is actually more complicated than this, but that's not the problem.
            pub.$callout.show();
        } else {
            pub.$callout.hide();
        }
    }
    return pub;
};

问题是，当详图索引最初从视图中隐藏并在单击时显示时，尝试关闭详图索引会失败。当我在Chrome调试器中为$callout.is(':hidden')添加断点和监视值时，即使元素可见，监视值也会计算为true。

根据jQuery对：hidden选择器的输入，似乎在任何给定时间都在检查许多属性，这让我想到了问题：在我的设置中，是什么在欺骗jQuery的:hidden选择器，使其始终相信callout是隐藏的，即使现在已经不是这样了？

编辑：由于我在侧面板中注意到我最近的一个问题，我的团队已经确保我们的应用程序在IE9标准模式下运行，所以环境应该不会成为问题。

编辑2：问题代码的混乱（更新！问题完全再现。）

尝试使用hasClass代替：

function toggleCallout() {
    if(pub.$callout.hasClass('hidden')) {
        pub.$callout.removeClass('hidden');
    } else {
        pub.$callout.addClass('hidden');
    }
}

或者使用toggleClass:更快

function toggleCallout() {
    pub.$callout.toggleClass('hidden');
}

另外，在使用MyCallout声明之前，一定要先放好它，否则会出现类似的错误

未捕获类型错误：未定义不是函数

调用时

var callout = new MyCallout($link, $callout);

工作Fiddle

这个问题实际上是一个CSS问题——虽然我的代码是正常的（正如我的OP中的jsFiddle所示），但.calloutdiv使用默认维度width: 0; height: 0进行渲染，这导致:hidden选择元素。

我所要做的就是添加以下CSS来解决我的问题：

.callout {
    width: 1em;
    height: 1em;
    /* ...As before... */
}

课程：始终检查元素！看起来像是脚本错误的东西，实际上可能完全是另一回事。

相关文章：