0

我有一个 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 线，则跨度将切换类，但在再次单击时显然不会切换回来。

4

3 回答 3

2

通过取消绑定事件处理程序，您并没有实现您想要的。因为您正在绑定点击处理程序，然后立即解除绑定，这就是为什么如果您保留线路则没有任何效果的原因。您需要每次都运行处理程序来更改类，处理程序是修改 DOM 的东西，它需要在扩展和收缩手风琴时做到这一点。

toggleClass()将成功完成您想要实现的目标。因此，请删除该off()行并将您的功能切换为：

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

另请注意，我将有一个默认状态，该状态的箭头向右倾斜，然后open我将切换一个将覆盖默认状态的类。这样你就只维护一个类。但这是一个架构挑剔。

于 2013-08-29T22:11:09.817 回答
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>

还是我误解了这个问题？

于 2013-08-29T22:12:20.283 回答
0

.on() 绑定一个事件， .off() 取消绑定它。见http://api.jquery.com/off/

于 2013-08-29T22:38:24.093 回答