2012-01-22 23 views
0

工作我使用dropkick.js到風格選擇菜單。當您點擊菜單以外的任何位置時,我正嘗試使菜單關閉。但removeClass()(和document.click())僅適用於firefox。在webkit中,菜單不會通過單擊外部或文檔中的任何其他位置來關閉。jQuery的文件點擊功能只在Firefox

刪除「.dk_open」和「.dk_focus」類會將元素返回到display:none,從而隱藏菜單。

有誰看到任何可能會造成這一矛盾?謝謝!

 $('.wpcf7 select').dropkick(); 

     var $dkopen = $('.dk_open'); 

     $(document).click(function(){ 
      $dkopen.removeClass('dk_open dk_focus'); 
     }); 

     $dkopen.click(function(){ 
      e.stopPropagation(); 
     }); 
+1

你能建立與http://jsfiddle.net演示?代碼從哪裏調用?單擊處理您設置的'$ dkopen'是要適用於有「dk_open」類的代碼運行時的任何元素 - 它會繼續適用於他們甚至一度類被刪除,也不會適用於稍後添加類的其他元素。 – nnnnnn

回答

0

我不知道這是不是你的問題的原因,但你應該嘗試在你的點擊功能添加到事件的引用:

$dkopen.click(function(e /*<-- here*/){ 
    e.stopPropagation(); 
}); 
2

這可以使用一些清理但它的工作是解決未按預期匹配原生選擇功能的下拉問題。

$(document).click(function(){ 
    $('.dk_open').removeClass('dk_open'); 
}); 

$('.dk_open').live('click',function(e){ 
    e.stopPropagation(); 
}); 

$('.dk_container, .dk_toggle').live('click', function(e){ 
    $('.dk_open').removeClass('dk_open'); 
}); 

添加最後一個事件處理程序,以在選擇另一個時關閉任何打開的下拉菜單。

0

就面臨着同樣的問題。

下面是一個相關鏈接談論這個:https://github.com/JamieLottering/DropKick/issues/45

您的解決方案(科瑞Aubuchon)做「工作」 ......在於:

當您單擊「外部」下拉列表,它接近......但是......

現在,當你點擊「內部」的下拉菜單(這將是點擊:「dk_container」或‘dk_toggle’) - 下拉不會關閉...

(而且,我不是在說在這裏選擇'選項',而是什麼我說的點擊相同的「向下」箭頭,你點擊查看擺在首位的選項)

我不是JS開發者,我只是結合的解決方案在這裏找到,從引用的解決方案鏈接,到沒有給我錯誤的東西。不知何故,它的工作。

反正試試這個 ...這作品在Chrome,IE,FF +(可以點擊內部或外部,在任何情況下,將工作:)

$(document).click(function(){$('.dk_open').removeClass('dk_open');}); 
    $('dk_open').on('click',function(e){e.stopPropagation();}); 
    $('.dk_container, .dk_toggle').on('click',function(e){var$dk=$(this).parents('.dk_container').first();{$('.dk_open').removeClass('dk_open');$dk.toggleClass('dk_open');}return false;}); 

..或...如果您願意...這是NOT縮小版本:

$(document).click(function(){ 
     $('.dk_open').removeClass('dk_open'); 
    }); 
    $('.dk_open').on('click',function (e) { 
     e.stopPropagation(); 
    }); 
    $('.dk_container, .dk_toggle').on('click',function (e) { 

     var $dk = $(this).parents('.dk_container').first(); 

     if ($.browser.webkit){ 
      $('.dk_open').removeClass('dk_open'); 
       $dk.toggleClass('dk_open'); 
     } 
     return false; 
    }); 
0

您需要爲每個選擇添加tabindex。之後,它會工作。 祝你好運!