javascript - 隐藏的选择器总是决定一个元素是可见的，即使它不可见

Question

我正在为即将到来的项目做的事情之一是标注/工具提示系统。从理论上讲，这是一件简单的小事。您采用一些标记，例如 this :

<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;
}

...并将其绑定(bind)在 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;
};

问题是，虽然标注最初隐藏在 View 中，并在单击时出现，但尝试关闭标注失败。当我在 Chrome 调试器中为 $callout.is(':hidden') 添加断点和观察值时，即使元素可见，观察值的计算结果为 真。

基于 jQuery's entry for the :hidden selector , 似乎在任何给定时间都在检查许多属性，这让我想到了问题:我的设置中是什么设法愚弄了 jQuery 的 :hidden选择器总是相信标注被隐藏，即使情况不再如此？

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

编辑 2:Fiddle of the problematic code (已更新!问题已完整复制。)

Answer 1

尝试使用 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 声明，否则你会得到类似

的错误

Uncaught TypeError: undefined is not a function

调用时

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

工作 Fiddle