的slideToggle時下拉選項集中

http://jsfiddle.net/EhTJF/的slideToggle時下拉選項集中

稱爲鏈接是我遇到的問題的例子。當一個元素懸停時，將調用slidetoggle（）以顯示一個下拉列表。當試圖在ddl中選擇一個選項時，再次調用slidetoggle（）並強制ddl和切換的元素摺疊。

我做錯了什麼想法？

*編輯

縮進的功能是允許用戶選擇從下拉列表中選擇一個選項，然後再把使該元件自動切換了。

來源

2012-07-23 kunsmasr

你使用什麼瀏覽器？在Chrome瀏覽器中，我可以在下拉列表中選擇一些內容，然後全部消失 – MrOBrian 2012-07-23 19:10:09

我在ie和ff14中都遇到了問題 – kunsmasr 2012-07-23 19:18:57

啊，我明白了，是的，IE9和Firefox都不會讓您選擇某些內容。您可能需要放棄使用'slideToggle'並在mouseenter上使用'slideDown'和在mouseleave上使用'slideUp'，然後將這些事件處理程序附加到您的所有元素。 – MrOBrian 2012-07-23 19:34:19

這是一個有點複雜，但也許是這樣的：

$(document).ready(function() { 
    var timer; 
    $('.dropdown').on({ 
     mouseenter: function() { 
      var elm = $(this).find('.sub_navigation'); 
      if (!elm.is(':visible')) { 
       elm.slideDown(100); 
      }else{ 
       clearTimeout(timer); 
      } 
     }, 
     mouseleave: function() { 
      var elm = $(this).find('.sub_navigation'); 
      timer = setTimeout(function() { 
       elm.slideUp(100); 
      }, 300); 
     } 
    }); 
});

FIDDLE

來源

2012-07-23 19:40:15 adeneo

這正是我期望做的。謝謝！ – kunsmasr 2012-07-23 19:43:33

不客氣！ – adeneo 2012-07-23 19:45:05

hover（）方法有2個簽名。第一個參數需要2個參數：一個用於鼠標進入元素時調用的函數，另一個用於退出時調用的函數。第二個簽名只接受一個函數，這個函數被稱爲進入和退出事件。在您當前的示例中，您對懸停輸入和懸停退出都使用相同的功能;這就是爲什麼你的下拉元素被隱藏。

http://api.jquery.com/hover/

如果你想下拉到第一懸停後仍保持開放我有這樣的例子：

http://jsfiddle.net/gwZbj/4/

來源

2012-07-23 19:29:28 FGreg

的slideToggle時下拉選項集中

回答

相關問題