jQuery .off未与.on合作

Question

我有一个jQuery accordion框，在每个链接的右边都有一个右箭头。当用户单击链接时，箭头变成向下箭头，内容展开。当用户点击同一链接时，箭头变成右箭头，并且内容被隐藏(典型的手风琴风格)。为了切换箭头，我使用了jQuery .on并切换掉了span元素上的一个类。当我尝试用.off删除事件时，一切都运行得很好。下面是我的脚本：

<script>
function handleClick(event) {
    $('#arrow').removeClass('icon-angle-right').addClass('icon-angle-down');
};

$('.panel-heading a').on('click', handleClick);
$('.panel-heading a').off('click', handleClick);
</script>

现在，什么都不能用。如果我删除.off行，那么span将切换类，但当再次单击时显然不会切换回来。

Answer 1

通过取消绑定事件处理程序，您无法实现您想要的结果。因为您绑定了click处理程序，然后立即解除了它的绑定，这就是为什么如果您将该行放在里面就什么都不起作用的原因。每次更改类时都需要运行处理程序，处理程序修改DOM，在扩展和收缩accordion时都需要这样做。

toggleClass()将成功地完成您希望实现的目标。，因此删除off()行，并将您的函数切换为：

function handleClick(event) {
    $('#arrow').toggleClass('icon-angle-right').toggleClass('icon-angle-down');
};

另一个注意事项是，我将有一个默认状态，即该项目的箭头向右倾斜，然后是一个我要切换的open类，它将覆盖默认状态。这样你就只需要维护一个类了。但这是架构上的吹毛求疵。

Answer 2

不确定为什么您要再次尝试删除处理程序。这样做不是更有意义吗：

<script>

$('.panel-heading a').on('click', function() {
     if ($(this).hassClass('icon-angle-right') {
          $(this).removeClass('icon-angle-right').addClass('icon-angle-down');
     } else {
          $(this).addClass('icon-angle-right').removeClass('icon-angle-down');
     }
});
</script>

还是我误解了这个问题？

Answer 3

.on()绑定一个事件，.off()解除它的绑定。请参阅http://api.jquery.com/off/