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();
});

よりアニメーション化されたメニューを作成する場合は、hideをfadeOut（）に置き換え、showをfadeIn（）に置き換えることができます。

編集：これは変更されたjsfiddleです。

于 2013-02-09T02:33:49.190 に答える