条件禁用/重新启用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');
    }
});

我想要做的是禁用所有淡出链接上的点击事件，只留下打开链接作为可点击的链接。如您所见，单击淡出链接的行为会使整个过程变得混乱。

我尝试在打开操作（否则）上设置.off('click')，它可以禁用其他链接上的点击。并且在关闭动作上加上.on('click')。但是在关闭操作运行后，其他链接仍然无法点击。

非常感谢您提供任何有关解决此问题的帮助！

- Ryan Palmer

---

你可以检查不透明度：if ($(this).css('opacity') < 1) return; http://jsfiddle.net/r8K78/4/ - A. Wolff

太棒了，而且非常简单！想把它作为答案放进去，这样我就可以接受了吗？ - Ryan Palmer

Answer 1

您可以检查不透明度：

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

查看

但更好的方法是在淡出的元素上设置一个类，并检查这个类，使代码更易读/可维护。

演示

- A. Wolff

---

我也喜欢那种方法。好东西！非常感谢你的帮助！ - Ryan Palmer