1

这可能是一个愚蠢的问题（不是全部吗？），但我已经被一些事情难住了一段时间......我正在尝试构建一个灯箱类型的弹出窗口来显示有关列表项的详细信息在定义列表中。我已经正常工作了fadeIn，fadeOut但是如果我在弹出窗口仍然处于活动状态时尝试在不同的列表项上触发相同的操作，我会遇到错误。

这是我正在使用的代码...

    <html>, etc...
    <div>
       <dl>
        <dt>Trigger Element</dt>
        <dd>
            <div>
            (lightbox content)
            </div>
        </dd>
       <dl>
        <dt>Trigger Element</dt>
        <dd>
            <div>
            (lightbox content)
            </div>
        </dd>
       Etc....
     </dl>

 (function() {
    // Highlight the target dt items
    $('div.cigar-pop').parent().prev().addClass('cigar-highlight');

    // Initialize the lightbox functionality
    $('dd').children('div').addClass('hidden');
    $('dt').on('click', function() {
        //I'm still not entirely sure why this part worked...
        var $this = this;
        $(this).next()
            .children('div')
                .addClass('active')
                    .fadeIn(800, function($this) {
                        $('body').one('click', function(){ 
                            $('.active').fadeOut('fast')
                                .removeClass('active');
            });
        });
    });

    })();

我打赌这很简单，但我不知道是什么。对不起，如果这对于这个论坛无与伦比的天才来说有点初级：P

4

1 回答 1

1

您可以添加检查以查看是否已经存在.active元素，然后返回。

$('dt').on('click', function() {
    if($('.active').length) return; // do not return false;
    // Your code

这将阻止执行此功能块中的其余代码。换句话说，当有一个.active元素时，点击另一个元素的行为dt将是隐藏当前.active元素，而不是显示一个新元素。

我们不这样做的原因return false;是这会阻止事件传播，这是我们需要它做的才能到达body，因此当前.active元素被删除/隐藏。

于 2012-08-07T04:26:02.637 回答