Question

这可能是一个愚蠢的问题（不是全部吗？），但我已经被困了一段时间了...... 我正在尝试构建一个灯箱类型的弹出窗口，用于显示定义列表中列表项的详细信息。我已经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

Answer 1

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

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

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

我们不return false;的原因是这会阻止事件传播，这是我们需要它来实现body，所以当前.active 被删除/隐藏。

jquery触发灯箱弹出窗口的冲突

1 个答案: