Question

我有一个jQuery手风琴盒，其中包含每个链接右侧的右箭头。当用户点击链接时，箭头变为向下箭头，内容会扩展。当用户点击同一链接时，箭头将返回右箭头并隐藏内容（典型的手风琴风格）。为了让箭头切换，我使用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的东西，它需要在扩展和收缩手风琴方面做到这一点。

toggleClass()会成功完成你想要实现的目标。所以删除off()行并关闭以下功能：

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

另外请注意，我将使用一个默认状态，该箭头的角度为该项目的右侧，然后是{I}}类，我将切换它将覆盖默认状态。那样你只维持一个班级。但那是一种架构挑剔。

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/

jQuery .off不能使用.on

3 个答案: