在IE中隱藏CSS下拉菜單

Question

我正在使用具有HTML結構的CSS菜單，例如：

<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>

可以在此jsFiddle中看到CSS。

它的工作原理很不錯，除了單擊一個項目后不會關閉子菜單。 由於菜單項觸發了頁面的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();
});

如果要創建更生動的菜單，則可以將hide替換為fadeOut（），並使用fadeIn（）顯示。

編輯：這是您的jsfiddle修改。