4

次のような構造の折りたたみ可能なメニューを作成しました。

  • 親
  • 親 2
  • 親 3
    • サブカテゴリ

私は次のJavaScriptを持っています

    var config = {
        over: function() { $(this).children('ul').slideDown('slow'); },
        timeout: 5,
        out: function() { }
    }

    $("ul.root-tags li").hoverIntent(config);

    $('ul.root-tags').mouseout(function() {
        $(this).children('li ul').each(function () {
            $(this).slideUp('slow');
        });
    });

基本的に、親アイテムのホバーでサブカテゴリを開きたいのですが、親アイテムだけでなく、リスト全体のマウスアウトで開いたサブカテゴリのみを折りたたみます。私の現在のコードはこれを行いません。どのような変更を加える必要がありますか?

jsfiddle はこちらhttp://jsfiddle.net/zkhVC/4/

4

3 に答える 3

3

これは、あなたが求めているものに対処する必要があります:

$('#head').mouseleave(function() {

    $(this).find('li ul').each(function () {
        $(this).stop().slideUp('slow');
    });

});

$("ul li").mouseenter(function() {
    $(this).children('ul').stop().slideDown('slow');
});​

フィドル

ここ

説明

  • イベントは使用しないでくださいhover。要素を超えていると、何度も何度も発生します。mouseenter代わりに使用したい。
  • mouseleaveの代わりに使用mouseout:

イベントは、イベント バブリングの処理方法mouseleaveが とは異なります。mouseoutこのmouseout例で が使用されている場合、マウス ポインターが内部要素の外に移動すると、ハンドラーがトリガーされます。これは通常、望ましくない動作です。一方mouseleave、イベントは、マウスが子孫ではなく、バインドされている要素から離れたときにのみハンドラーをトリガーします。したがって、この例では、マウスがアウター要素から離れたときにハンドラーがトリガーされますが、インナー要素からはトリガーされません。

  • セレクターの仕組みを詳しく見てみましょうchildren。ここでは関数は必要ありません。
  • アニメーションを呼び出す前に関数を使用してstop、アニメーションのバッファリングを防ぎたい。
于 2012-10-21T09:35:43.180 に答える
1

mouseleaveの代わりにjQuery を使用しmouseoutます。

$('ul.root-tags').mouseleave(function() {
    $(this).find('ul').slideUp('slow');
});

$("ul.root-tags li").hover(function() {
    $(this).find('ul').slideDown('slow');
})​

このFIDDLEを参照してください。

于 2012-10-21T09:32:52.870 に答える