0

我正在使用具有 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>

CSS 可以在这个 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 中也能做到这一点？有没有更好的方法让子菜单在点击后消失？

4

1 回答 1

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() 代替show。

编辑：这是你的jsfiddle修改。

于 2013-02-09T02:33:49.190 回答