有条件的禁用/重新启用jQuery click事件 [英] Conditional Disable / Re-Enable jQuery click event

问题描述

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

I've got a problem with disabling and re-enabling click events on links.

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

The setup is 4 columns in a row, each column containing a link and hidden content box. When you click a link, it expands the row and displays content box specific to that column. Once a link is clicked and the row expanded, all of the other links are then faded out. You would then re-click the open link to close the row and un-fade the other links.

我已经设置了这种情况的工作提要，应该可以帮助解释它...

I've setup a working fiddle of this scenario which should help explain it...

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

我想做的是在所有淡出的链接上禁用click事件，而将打开的链接保留为唯一的可点击链接.如您所见，单击淡出链接的行为使整个过程变得轻而易举.

What I'm trying to do is disable the click event on all the faded out links, leaving the open link as the only click-able link. As you can see, the behavior of clicking a faded out link makes the whole thing go batty.

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

I've tried setting .off('click') on the open action (else) which does the job of disabling the click on the other links. And put .on('click') on the close action. After the close action runs, the other links are still not clickable.

任何帮助我们弄清楚这一点的人，将不胜感激！

Any help on figuring this out would be hugely appreciated!

推荐答案

您可以检查不透明度:

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

看到了

但是更好的方法是在淡出的元素上设置一个类，然后检查该类，以使代码更具可读性/可维护性.

But better would be to set a class on faded out elements and check for this class instead, making code more readable/maintanable.

演示

这篇关于有条件的禁用/重新启用jQuery click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！