隱藏CSS下拉菜單在IE

Question

我使用一個CSS菜單具有HTML結構，如：

<div class="toolmenu" style="min-width:800px"> 
    <ul> 
     <li><a class="dropdown left" href="#">Main A</a></li> 
    </ul> 
    <ul> 
     <li><a class="dropdown right" href="#">Main B<span class="tm-arrow">&#9660;</span></a> 
      <ul class="tm-width-2"> 
       <li><a href="#">Sub i</a></li> 
       <li><a href="#">Sub ii</a></li> 
       <li><a href="#">Sub iii</a></li> 
       <li><a href="#">Sub iv</a></li> 
      </ul> 
     </li> 
    </ul>     
</div> 

的CSS可在this jsFiddle可見。

它工作的很好，除了子菜單不會關閉，一旦一個項目被點擊。由於菜單項會觸發頁面的Ajax更新，因此會帶來奇特的UI體驗。

爲了解決這個問題，我嘗試了一些JavaScript：

$('div.toolmenu ul li ul li a').click(function() { 
    var grand = $(this).parent().parent(); 
    grand.css('display', 'none'); 
    setInterval(function() { 
     grand.css('display', ''); 
    }, 300); 
}); 

在最瀏覽器奇妙的作品。 IE瀏覽器，但是，行爲如下：

• 子菜單上點擊
• 子菜單會重新出現消失的setInterval的回調火災

後，我怎樣才能讓在IE這項工作呢？點擊後是否有更好的方法使子菜單消失？

Answer 1

而不是使它重新出現的間隔，你可以使它出現在鼠標輸入功能。如果你想創建一個更活潑的菜單中，您可以用淡出（取代隱藏），並與淡入顯示（）

$('div.toolmenu ul li ul li a').click(function() { 
    var grand = $(this).parent().parent(); 
    grand.hide(); 

}); 

$('.dropdown').mouseenter(function(){ 
    $(this).next('ul').show(); 
}); 

：試試這個。

編輯：這是你的jsfiddle修改。