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>

可以在this 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();
});

如果你想创建一个更动画的菜单，可以用fadeOut（）替换hide，并用fadeIn（）显示。

编辑：这是您的jsfiddle已修改。

在IE中隐藏CSS下拉菜单

1 个答案: