Question

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

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

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

$('.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');
    }
});

我要做的是禁用所有淡出链接上的click事件，将打开的链接保留为唯一可点击的链接。正如您所看到的，单击淡出链接的行为会使整个过程变得臃肿。

我尝试在开放操作（其他）上设置.off('click')，该操作可以禁用其他链接上的点击。并将.on('click')置于关闭操作上。关闭操作运行后，其他链接仍然无法点击。

任何有关解决这个问题的帮助都会非常感激！

Answer 1

你可以检查不透明度：

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

SEE

但最好是在淡化元素上设置一个类，然后检查这个类，使代码更具可读性/可维护性。

DEMO

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

1 个答案: