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

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

jquery jquery-plugins triggers

jquery触发灯箱弹出窗口的冲突,jquery,jquery-plugins,triggers,Jquery,Jquery Plugins,Triggers,这可能是一个愚蠢的问题（不是全部吗？）。。。我正在尝试构建一个lightbox类型的弹出窗口，用于显示定义列表中列表项的详细信息。我已使fadeIn和fadeOut正常工作，但如果我在弹出窗口仍处于活动状态时尝试在不同的列表项上触发相同的操作，则会出现错误这是我正在使用的代码 <html>, etc... <div> <dl> <dt>Trigger Element</dt>

这可能是一个愚蠢的问题（不是全部吗？）。。。我正在尝试构建一个lightbox类型的弹出窗口，用于显示定义列表中列表项的详细信息。我已使

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

    })();

等。。。
触发元件
（灯箱内容）
触发元件
（灯箱内容）
等
（功能（）{
//突出显示目标dt项目
$（'div.cigar-pop'）.parent（）.prev（）.addClass（'cigar-highlight'）；
//初始化lightbox功能
$（'dd'）.children（'div'）.addClass（'hidden'）；
$（'dt'）。在（'click'，function（）上{
//我仍然不能完全确定为什么这个部分起作用。。。
var$this=这个；
$（this.next（）
.儿童（div）
.addClass（“活动”）
.fadeIn（800，功能（$this）{
$（'body'）.one（'click'，function（）{
$（'.active'）.fadeOut（'fast'））
.removeClass（“活动”）；
});
});
});
})();

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

您可以添加一个检查，看看是否已经有

.active

元素，然后返回

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

这将阻止此函数块中的其余代码执行。换句话说，当存在一个

.active

元素时，单击另一个

dt

的行为将隐藏当前

.active

元素，而不是显示一个新元素

我们不

返回false的原因

是指这将阻止事件传播，这是我们需要它到达

主体

所做的，因此当前的

.active

元素将被删除/隐藏。

您可以添加一个检查，查看是否已经存在

.active