javascript - JQuery hasClass - 为什么在这种情况下它总是返回 false？

Question

我有一个带有背景图像的跨度，我想在单击时在加号和减号的背景图像之间交替。我想添加和删除“打开”类来执行此操作。我的跨度看起来像这样......

<span class="expand open"></span>

我的 JQuery 看起来像这样......

$(function() {
    $('.expand').click(function() {
        if ($(this).hasClass('open')) {
            $(this).removeClass('open');
        } else {
            $(this).addClass('open');
        }
    });
});

我得到的行为是它会添加“打开”类，但在重复点击后不会再次删除它。登录到控制台显示我的 if 语句始终评估为 false。

我考虑过使用 toggleClass 但没有这样做，因为一旦它起作用，我打算使用相同的 if 语句来显示/隐藏内容 block 。

http://jsfiddle.net/Vz7YL/

编辑 由于人们关注我的 CSS，因此我也会提供它。 (SASS/SCSS):

.expand {
    background: url(/images/plus-minus-orange.gif) top center no-repeat;
    display: block;
    height: 21px;
    margin: 0 auto;
    width: 22px;
    &.open {
        background: url(/images/plus-minus-orange.gif) bottom center no-repeat;
    }
}

我还可以补充一点，跨度显示正确且可点击，我无法使用简化版本的代码重现问题。

Answer 1

你的 fiddle 对我来说很好用。只需在 span 中添加一些文本，这样您就可以实际点击 span。

<span class="expand open">Some Text Here</span>