jquery觸發衝突的燈箱彈出

這可能是一個愚蠢的問題（他們都不是？），但我已經難倒了一段時間... 我試圖建立一個lightbox類型彈出窗口，用於顯示定義列表中的列表項的詳細信息。我有fadeIn和fadeOut正常工作，但是如果我在彈出窗口仍處於活動狀態時嘗試觸發相同的列表項，則會出現錯誤。jquery觸發衝突的燈箱彈出

這裏是我的工作代碼...

<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

來源

2012-08-07 monners

請作爲jsfiddle – 2012-08-07 04:25:21

你可以添加一個檢查，看看是否已經有.active元素，只是返回。

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

這樣可以防止執行此功能塊中的其餘代碼。換句話說，當有一個.active元素時，單擊另一個dt的行爲將隱藏當前的元素，而不是顯示一個新元素。

我們這樣做的原因不是return false;是，這將從傳播，這是我們需要做的，達到body，所以目前.active元素被移除/隱藏停止該事件。

來源

2012-08-07 04:26:02 ahren

是的！那就是訣竅。非常感謝！ – monners 2012-08-07 05:01:13

確實不錯！ '：）'+1 – 2012-08-07 22:31:29

jquery觸發衝突的燈箱彈出

回答

相關問題