条件禁用/重新启用 jQuery 点击事件

Question

我在禁用和重新启用链接上的点击事件时遇到问题。

设置为一行 4 列，每列包含一个链接和隐藏的内容框。单击链接时，它会展开行并显示特定于该列的内容框。单击链接并展开行后，所有其他链接都会淡出。然后，您将重新单击打开的链接以关闭该行并取消淡化其他链接。

我已经设置了这个场景的工作小提琴，应该有助于解释它......

http://jsfiddle.net/r8K78/2/

$('.open-box').click(function(event) {
    event.preventDefault();

    var $list_row = $(this).parents('.row'),
        $column_box = $(this).parent('.column').find('.box');

    if ( $(this).is('.open') ) {
        $(this).removeClass('open');
        $list_row.stop().animate({ 'padding-bottom': 0 }, 100).removeClass('expanded');
        // hide the content box
        $column_box.hide();
        // find all links and fade them in
        $('.box-list').find('.box-link').fadeTo(100, 1).addClass('open-box');
    } else {
        $(this).addClass('open');
        $list_row.stop().animate({ 'padding-bottom': 200 }, 100, function() {
            // show the content box
            $column_box.fadeIn(100);
        }).addClass('expanded');
        // find all links and fade them out
        $('.box-list').find('.box-link').not(this).fadeTo(100, 0.25).removeClass('open-box');
    }
});

我想要做的是禁用所有淡出链接上的点击事件，将打开的链接保留为唯一可点击的链接。如您所见，单击淡出链接的行为会使整个事情变得混乱。

我尝试在打开操作 (else) 上设置 .off('click')，它可以禁用对其他链接的点击。并将.on('click') 放在关闭操作上。关闭操作运行后，其他链接仍然不可点击。

我们将不胜感激任何有关解决此问题的帮助！

Answer 1

你可以只检查不透明度：

if ($(this).css('opacity') < 1) return;

SEE

但更好的做法是在淡出元素上设置一个类并检查该类，从而使代码更具可读性/可维护性。

DEMO